移动端上拉加载better-scroll

better-scroll - 插件
网站：https://ustbhuangyi.github.io/better-scroll/doc/zh-hans
滚动原理：

绿色部分为 wrapper，也就是父容器，它会有固定的高度。黄色部分为 content，它是父容器的第一个子元素，它的高度会随着内容的大小而撑高。那么，当 content 的高度不超过父容器的高度，是不能滚动的，而它一旦超过了父容器的高度，我们就可以滚动内容区了，这就是 better-scroll 的滚动原理。 — 官方解释

接下来操作下来实现效果
首先 安装better-scroll插件 npm i better-scroll -S

其次，html结构必须得严格遵循浮动原理

• 绿盒是可视区域
• 黄盒是内容区域-滚动区域

1. 实例化BScroll对象 (这样就可以达到滑动的效果) - - - 一般封装的库传的都是实例化对象传的都是选择器，一般他底层都会直接获取
2. 去除遮罩 — 滚动条是悬浮在页面上方的，有一个遮罩，所以点击不到内容
   3.用on方法调用pullingUp上拉加载事件
   • 3.1开启上拉的开关 - pullUpLoad
   • 3.2持续执行上拉事件（拉一次告诉他这一次拉完了） - this.bscroll.finishPullUp();
   • 3.3执行一次发一次请求
   • 3.4处理数据请求的参数

代码区域：mounted钩子

<script>
import BScroll from 'better-scroll'
import {mapActions} from 'vuex'
import _ from 'loadsh' //原生js的封装库
import {Toast} from 'vant'
export default {
  name: "List",
  props: ["movielist","movieIds"],//父子组件通信
  methods:{
    ...mapActions('movieStore',['getMore'])
  },
  mounted(){
      //1.实例化对象
      this.bscroll=new BScroll('.classic-movies',{//父容器
          click:true,//2.关闭遮罩
          pullUpLoad: {//3.1 开启上拉的开关
            threshold: 50
        }
      });
      let count=0;
      this.bscroll.on('pullingUp',()=>{//3.绑定上拉事件
        console.log('上拉')
        //3.4处理数据请求的参数
        //请求中最重要的一个参数:movieIds 是需要变化的，不然每次下拉请求的数据一样会冲突报错
        //并且需要写成二维数组的形式，写成数组方便装成字符串形式
        //处理请求的id字符串
        const ids=_.chunk(this.movieIds.slice(12),10)//一维数组转二维数组，并剔除前面12条数据
        console.log('ids',ids)
        if(count<ids.length){
            //3.3拉完一次发一次请求
            this.getMore({
                token: '',
                movieIds:ids[count].join(','),
                optimus_uuid: '52CBC1F0D32411EA9168D3A31F729789EDA28E18F66341B7B4C3DE262A1CB272',
                optimus_risk_level: 71,
                optimus_code: 10
            })
        }
        if(count===ids.length){
            Toast('没有更多了');
            this.bscroll.finishPullUp();// 没有更多了执行多次
            return
        }
        count++
        this.bscroll.finishPullUp();//3.2持续执行上拉事件
      })
  },
  destory(){//页面跳转消除实例
    delete this.bscroll
  }
};
</script>

这里在介绍一个使用的工具库
Lodash
https://www.lodashjs.com/
是一个一致性、模块化、高性能的 JavaScript 实用工具库。
里面封装了各种数组、集合、对象…的方法
例如：_.chunk(array, [size=1]) — 将一维数组拆为二维数组