Skip to content

zhongxuqi/wx-pulltorefresh-view

Repository files navigation

wx-pulltorefresh-view

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

组件简介

组件名 目录 扩展组件 扩展内容
wx-pulltorefresh-view /components/wx-pulltorefresh-view scroll-view 增加scroll-view自身的下拉和上拉刷新功能
  • wx-pulltorefresh-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-text String 下拉可以刷新 下拉还不能刷新时显示的文字
release-text String 松开立即刷新 下拉至可刷新时显示的文字
loading-text String 正在刷新数据中 刷新时显示的文字,尾部会自动接 ...
finish-text String 刷新完成 刷新完成时显示的文字
pull-up-text String 上拉加载更多 上拉加载更多时显示的文字
pull-up-release-text String 松开立即加载 松开立即加载时显示的文字
loadmore-text String 正在加载更多数据 上拉加载更多时显示的文字
loadmore-finish-text String 加载完成 加载完成时显示的文字
nomore-text String 已经全部加载完毕 上拉加载无数据后显示的文字
refreshing Boolean false 是否正在刷新
nomore Boolean false 是否没有更多数据(加载完毕)
disablePullDown Boolean false 是否开启下拉
disablePullUp Boolean false 是否开启上拉
bindpulldownrefresh HandleEvent 当下拉刷新时触发
bindloadmore HandleEvent 当滚动到底部时触发

注意:

  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);
  },
})

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published