前端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>

如上

  1. 类  .scroller  就是初始化 better-scroll 时作用的 dom （容器）, 这个元素需要有个固定的高度，然后需要设置  overflow 的样式，经尝试设置  overflow: hidden; 或者  overflow-y: auto; 都可以
  2. 类  .scroll-list 就是要滚动的容器,这个盒子不需要给多余的样式（类似高度或者 overflow 的样式），它的高度是列表的内容撑开的，但有一个要求，当初始化  better-scroll 时这个盒子的高度是大于容器  .scroller 的。
  3. 类  .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)

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

 

  1. 这里有个判断，如果已经初始化就刷新 better-scroll 否则就初始化 better-scroll.（好处就是可以直接将其写在请求列表之后，不用单独拎出来调用 initScroller 代码）
  2. 这个方法需要在dom挂载在页面之后调用， vue 请写在  $nextTick 方法中

以上代码就是上拉加载下拉刷新的基本代码

 

下面总结一些坑点

1. 手指触摸了一点页面就哧溜滑动了好多，可能是给容器设置  -webkit-overflow-scrolling: touch; 样式了，删掉即可

2. 添加better-scroll 后页面需要横向滚动的地方不能滚动，添加  eventPassthrough: 'horizontal' 配置，具体原因参考官方文档该配置介绍

 

 

待续

posted @ 2019-10-15 11:33  blackbentel  阅读(7437)  评论(0)  编辑  收藏  举报