vue中使用better-scroll组件实现页面拉到底自动加载数据

一、安装环境

"vue": "^2.5.2",
"vue-router": "^3.0.1",

二、所需安装包

"better-scroll": "^1.12.0",

三、所遇问题

项目中，数据请求接口需要指定 ：

• 页数（pageNum）
• 每页数据数量（pageSize）

页数默认是1，起初我请求pageSize为30，这样当数据量超过30时，最早的、多出的数据就无法显示。

四、解决办法

使用 better-scroll 组件 1.12.0版，使用的不是最新版的（因为最新版的示例文档一下子没看懂，咳咳）。

• 首先查看scroll组件的文件

查看 scroll 组件中的方法，找到自己所需要的函数，根据需求，此时我们需要的是 pullup函数，所以我们要在使用到scroll组件的地方，传递（props） pullup为true，用以激活方法。

props：{
 /**
       * 是否派发滚动到底部的事件，用于上拉加载
       */
      pullup: {
        type: Boolean,
        default: false
      },
}

methods：{
 // 是否派发滚动到底部事件，用于上拉加载
        if (this.pullup) {
          this.scroll.on('scrollEnd', () => {
            // 滚动到底部
            if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
              this.$emit('scrollToEnd')
            }
          })
        }
}

在页面中使用scroll组件

最后实现效果

首次加载，只显示10条数据，屏幕滑到底部就触发scroll事件，加载第二页的10条处数据。