前端下拉刷新,上拉加载的实现一直都有很多坑,今天入以下 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
- 加 setTimeout
- 如果只是做下拉刷新上拉加载 probeType
第三步
当页面发生变化时刷新 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 }
- 这里有个判断,如果已经初始化就刷新 better-scroll 否则就初始化 better-scroll.(好处就是可以直接将其写在请求列表之后,不用单独拎出来调用 initScroller 代码)
- 这个方法需要在dom挂载在页面之后调用, vue 请写在 $nextTick
以上代码就是上拉加载下拉刷新的基本代码
下面总结一些坑点
1. 手指触摸了一点页面就哧溜滑动了好多,可能是给容器设置 -webkit-overflow-scrolling: touch;
2. 添加better-scroll 后页面需要横向滚动的地方不能滚动,添加 eventPassthrough: 'horizontal'
待续