【vue】 better-scroll 高度不够时遇到的问题

前言

前段时间在开发时,需要实现手机端的流畅滑动,最开始直接用的是 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 不能充满屏幕。
【vue】 better-scroll 高度不够时遇到的问题

这就会导致一个问题,items 不够多时,下拉加载的函数会失效。

【vue】 better-scroll 高度不够时遇到的问题如图,我打印的是 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 ~

上一篇:TEXTMETRIC 结构详解


下一篇:【转】Setting up SDL 2 on MinGW