平台兼容性

# 运行demo

common文件夹复制到uni项目根目录
把demo.vue 放到 pages中，
pages.json的pages中添加

{
   "path": "pages/demo",
   "style": {
      "navigationBarTitleText": "演示",
        "enablePullDownRefresh": true
      }
}

访问这个页面

用法

1 设置

开启页面的下拉刷新
在pages.json中需要开启下拉刷新的页面的style中添加"enablePullDownRefresh": true

{
   "path": "pages/demo",
   "style": {
      "navigationBarTitleText": "演示",
        "enablePullDownRefresh": true
      }
}

2 集成：

在vue页面中引入
import BetterPull from "@/common/BetterPull";

在vue中添加mixins

mixins: [BetterPull({getPage(page,done){done(); }})],

参数说明： page int 页码，从1开始 done(Array) function 结束函数，参数是ajax返回的数组

3 使用

<view v-for="db in list">{{db}}</view>

这里的list可以在mixins中定义，可以看demo.vue

4刷新

this.Refresh();

5注意

默认会在data中引入变量list和page
可以在mixins中可以自定义变量名称

mixins: [
    BetterPull({
        getPage(page,done){done(); }},
        list:"myList",
        page:"pageindex"
    )],
使用的时候变成
<view v-for="(db,i) in myList"> </view>

完整示例

<script>
import BetterPull from "@/common/BetterPull";
export default {
  mixins: [
    BetterPull({
      getPage(page, done) {
        console.log(`获取第${page}页数据`);
        //ajax获取数据后使用done保存当前页面的数据
        setTimeout(() => {
          done([1, 2, 3, 4, 5]);
        }, 1000); //模拟ajax，可以看下面的注释

        // uni.request({
        //   url: base + url,
        //   method: "POST",
        //   data:{page},
        //   success: res => {
        //     var data = res.data;//获取当前页数组
        //     done(data.list)//调用done可以更新页面，同时结束下拉刷新，上拉加载
        //   },
        //   fail: err => {
        //     done([]);//如果没有数据也需要调用
        //   }
        // });
      },
      list: "list", //变量名不冲突可以省略
      page: "page" //变量名不冲突可以省略
    })
  ]
};
</script>