Home

Awesome

wx-pulltorefresh-view

wx-pulltorefresh-view是小程序基础组件的扩展,不定期更新

组件简介

组件名目录扩展组件扩展内容
wx-pulltorefresh-view/components/wx-pulltorefresh-viewscroll-view增加scroll-view自身的下拉和上拉刷新功能

使用方法

  1. 下载代码

  2. 复制文件夹 wx-pulltorefresh-view 到你自己的项目中

  3. 在需要使用相关组件的页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:

    {
      "usingComponents": {
        "pulltorefresh-view": "../../components/wx-pulltorefresh-view/wx-pulltorefresh-view"
      }
    }
    
  4. 在页面的 wxml 中就可以像使用基础组件一样使用自定义组件。节点名即自定义组件的标签名,节点属性即传递给组件的属性值。

    <view>
      <x-tag-name attr-name="attr-value"></x-tag-name>
    </view>
    

    参考:自定义组件官方文档

组件文档

wx-pulltorefresh-view

属性名类型默认值说明
pull-textString下拉可以刷新下拉还不能刷新时显示的文字
release-textString松开立即刷新下拉至可刷新时显示的文字
loading-textString正在刷新数据中刷新时显示的文字,尾部会自动接 ...
finish-textString刷新完成刷新完成时显示的文字
pull-up-textString上拉加载更多上拉加载更多时显示的文字
pull-up-release-textString松开立即加载松开立即加载时显示的文字
loadmore-textString正在加载更多数据上拉加载更多时显示的文字
loadmore-finish-textString加载完成加载完成时显示的文字
nomore-textString已经全部加载完毕上拉加载无数据后显示的文字
refreshingBooleanfalse是否正在刷新
nomoreBooleanfalse是否没有更多数据(加载完毕)
disablePullDownBooleanfalse是否开启下拉
disablePullUpBooleanfalse是否开启上拉
bindpulldownrefreshHandleEvent当下拉刷新时触发
bindloadmoreHandleEvent当滚动到底部时触发

注意:

  1. 触发 pulldownrefresh 事件时,组件的 refreshing 属性要设为 true ,刷新完成后将其设为 false 以完成刷新
  2. 当没有更多数据时,将组件的 nomore 属性设为 true

示例

<view class="page-index">
  <pulltorefresh-view style="height:100%" nomore="{{nomore}}" refreshing="{{refreshing}}" bindpulldownrefresh="refreshData" bindloadmore="loadmoreData">
    <view class="list-item" wx:for="{{colors}}" wx:for-index="index" wx:key="index" style="background: {{item}}">{{index + 1}}. {{item}}</view>
  </pulltorefresh-view>
</view>
Page({
  data: {
    colors: [],
    refreshing: false,
    nomore: false,
  },
  randomColor: function () {
    return `rgba(${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},${Math.floor(Math.random() * 256)},1)`;
  },
  generateColors: function (length) {
    return new Array(length).fill(null).map(() => this.randomColor());
  },
  onLoad: function () {
    const colors = this.generateColors(10);
    this.setData({
      colors: colors,
    });
  },
  refreshData: function () {
    this.setData({
      refreshing: true,
    })
    setTimeout(() => {
      const colors = this.generateColors(10);
      this.setData({
        colors,
        refreshing: false,
        nomore: false,
      });
    }, 2000);
  },
  loadmoreData: function () {
    this.setData({
      refreshing: true,
    })
    setTimeout(() => {
      if (this.data.colors.length > 10) {
        this.setData({
          nomore: true,
        })
      } else {
        const colors = this.generateColors(8);
        this.setData({
          colors: [...this.data.colors, ...colors],
        });
      }
      this.setData({
        refreshing: false,
      })
    }, 2000);
  },
})