更新记录

1.0.1（2020-01-15）

修复IOS平台相关BUG

1.0.0（2019-10-15）

无

平台兼容性

yy-refresh

基于uni-app 的nvue上拉刷新和下拉加载插件 ，可以灵活控制刷新和加载的提示。

插件地址https://ext.dcloud.net.cn/plugin?id=862

插件效果

使用教程

• 导入插件

  //下拉刷新插件
  import yyRefresh from '@/components/yy-refresh/yy-refresh.nvue';
  //上拉加载插件
  import yyLoadMore from '@/components/yy-refresh/yy-load-more.vue';

• 声明插件

  components: {
      yyRefresh,
      yyLoadMore
  }

• 使用插件

  <list class="list" :style="{ height: screenHeight, width: screenWidth }">
  <!-- 下拉刷新 -->
  <yy-refresh :refresh-text="refreshText" @refresh="onRefresh" ref="yyRefresh"></yy-refresh>
  <cell v-for="(item, index) in testData" :key="index" class="list-item">
      <text style="line-height: 30px;">{{ item }}</text>
  </cell>
  <!-- 上拉加载 -->
  <yy-load-more :loading-text="loadMoreText" @loadMore="onLoadMore" ref="yyLoadMore"></yy-load-more>
  </list>

  在调用插件的页面实现：

  onRefresh() {
  //此处模拟请求数据 Here the request data is simulated
  setTimeout(() => {
      this.testData = 20
      //结束刷新 stop refreshing
      this.$refs.yyRefresh.finish();
  }, 1000);
  },
  onLoadMore() {
  //此处模拟请求数据  Here the request data is simulated
  setTimeout(() => {
      //结束加载  stop loading
      if (this.testData > 20) {
          this.$refs.yyLoadMore.finish(false);
      } else {
          this.testData += 10
          this.$refs.yyLoadMore.finish(true);
      }
  }, 1000);
  }

  参数说明

监听事件说明

其它

that.$refs.yyRefresh.finish(<Number>);

其中的Number为加载完成后显示结果的时间（单位为ms），即上拉加载显示加载完成的时间。

that.$refs.yyLoadMore.finish(<boolean>);

其中的Boolean为是否还有更多数据，默认为True 如有BUG欢迎更正，github地址：https://github.com/RickyHal/yy-refresh