前言
前段时间在开发时,需要实现手机端的流畅滑动,最开始直接用的是 mint-ui ,但是中途发现了一些问题,后来发现了 better-scroll ,简单用了一下,发现效果还不错,但也是遇到了一些小问题…
先附上 better-scroll 官方网站: http://ustbhuangyi.github.io/better-scroll/doc/api.html
问题
在 vue 中,结合 vue 的组件化开发特点,可以将其封装成一个组件,
作者的亲自封装:当 “ better-scroll 遇见 Vue” https://zhuanlan.zhihu.com/p/27407024
尽管 better-scroll 已经可以完成绝大多数 scroll 操作,但是我的项目需求有点不一样…
一般情况下,对于一般的手机应用而言,都是下拉进行刷新, 上拉进行加载,而在我的项目中,有一点特殊要求,具体是要上拉的操作并不是刷新,而是加载前几天的 items 。
在这里我的解决方法是将下拉刷新的事件绑定为加载前几天的 items
loadTop() {
this.order = 1
getRace(params).then((res) => {
console.log(res)
if(res.status === 201) {
this.races = [
...res.data.data.reverse(),
...this.races
]
// console.log(this.races)
}
})
this.$refs.scroll.refresh()
},
本来觉得是一个比较简单的问题,实际上线后的小应用最开始也没发现问题,但是过了一段时间,bug 出现了,在加载的 item 比较少时, 上拉加载更多的 item 不能充满屏幕。
这就会导致一个问题,items 不够多时,下拉加载的函数会失效。
如图,我打印的是 items 数组的数据 、这里可以发现,这里请求的一直是上拉加载更多的函数,并没有执行下拉函数。
简单分析一下,当页面中 items 不够多时,下拉函数会被禁用,因为原本 better-scroll 也没有考虑这方面,下拉是为了刷新,而我项目是为了加载以前的 items 。
为了解决此问题,我简单尝试了几个方法。
首先是高度问题,这个 bug 的根源在于 items 不够多, 因此可以考虑增加高度的方法,让下拉函数生效。
实际我的解决办法是将上拉加载的函数中添加判断,当上拉加载更多的函数返回的数据为空时, 使用下拉函数,
具体代码如下:
loadBottom() {
getRace(params).then((res) => {
if(res.status === 201) {
if (JSON.stringify(res.data.data) === '{}') { // 判断返回的对象是否为空
this.loadTop() 执行下拉函数
} else {
this.races = [
...this.races,
...res.data.data
]
// console.log('nore')
}
}
})
this.$refs.scroll.refresh()
}
这里需要注意的是判断对象是否为空的 if 语句,
if (res.data.data === {} )
是不能判断对象为空的,当时就踩到了这个坑…
所以这里我将返回的数据转化成 json 格式 ,
判断字符串if (JSON.stringify(res.data.data) === '{}')
成功解决 bug ~