【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 不能充满屏幕。

这就会导致一个问题，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 ~