前端vue使用better-scroll实现下拉刷新，上拉加载

前端下拉刷新，上拉加载的实现一直都有很多坑，今天入以下 better-scroll 的坑，先附上 better-scroll 的官方文档，如果要深入使用还是得看文档查看链接

第一步

先看下better-scroll实现时的dom结构,如下代码

1 <div class="scroller" ref="scroller">
2   <div class="scroll-list">
3     <div class="scroll-item"></div>
4     <div class="scroll-item"></div>
5     <div class="scroll-item"></div>
6     <div class="scroll-item"></div>
7     <p class="loading">{{ loadingText}}</p>
8   </div>
9 </div>

如上

类 .scroller 就是初始化 better-scroll 时作用的 dom （容器）, 这个元素需要有个固定的高度，然后需要设置 overflow 的样式，经尝试设置 overflow: hidden; 或者 overflow-y: auto; 都可以
类 .scroll-list 就是要滚动的容器,这个盒子不需要给多余的样式（类似高度或者 overflow 的样式），它的高度是列表的内容撑开的，但有一个要求，当初始化 better-scroll 时这个盒子的高度是大于容器 .scroller 的。
类 .loading 是列表底部类似 “上拉加载”，“没有更多了”这样的提示，可以根据列表的状态动态的更改里面的内容

第二步

初始化 better-scroll, 代码如下（可以将这一步放在第三步调用，不需要拎出来直接调用）

 1 initScroller() {
 2   //初始化betterScroll
 3   let self = this
 4   self.scroller = new BScroll(self.$refs.scroller, {
 5     probeType: 1,
 6     click: true
 7   })
 8   self.scroller.on('touchend', function (position) {
 9     if (position.y < this.maxScrollY - 30) { // 上拉加载
10       if (self.isNoMore) return self.loadingText = '没有更多了...'
11       self.loadingText = '加载中...'
12       setTimeout(function () {
13         self.getList()
14       }, 1000)
15     }
16     if (position.y > 80) { // 下拉刷新
17       self.list.length= 0
18       self.loadingText = '刷新中...'
19       setTimeout(function () {
20         self.getList()
21       }, 1000)
22     }
23   })
24 }

如上代码(vue)

如果在 vue 中使用，并且在其他作用域需要使用初始化后的实例 scroller ，可以将其挂载的 vue 的 data 属性上，在 mounted 或者 this.$nextTick(() => {/* 初始化代码*/}) 方法中初始化
初始化时的第二个参数根据自己的需求传递，可以不传
这时候你的页面在上拉和下拉的时候就已经有了 Q 弹的效果，如果没有请检查自己的代码
监听 touchend 方法就是为了加上拉加载和下拉刷新
this.maxScrollY 是 scroller 的属性（this 指向 self.scroller 并不是指向 vue的）
加 setTimeout 是为了过度平滑一点有个加载中的效果，也可以不加
如果只是做下拉刷新上拉加载 probeType 设置为1就可以，其他值的定义请参考官方文档

第三步

当页面发生变化时刷新 better-scroll，如下 this 是vue中的代码

 1 getList () {
 2   ...
 3   ..，
 4   ...
 5   this.$nextTick(() => {
 6     this.loadingText = '上拉加载'
 7     if (this.isNoMore) {
 8       this.loadingText = '没有更多了...'
 9     }
10     this.scroller ? this.scroller.refresh() : this.initScroller()
11   })
12 }