better-scroll封装上拉刷新，下拉加载更多功能

一、better-scroll的初始使用

首先下载

cnpm install better-scroll

在代码中引用

import BScroll from ‘better-scroll’

接下来便是new

let wrapper = document.querySelector('.wrapper')
let scroll = new BScroll(wrapper)//wrapper是外层较小的那个盒子

⚠️：使用原理必须是外层有一个较小的盒子，外层有一个较大的盒子，这样才可以滚动起来。

同时new BScroll的时候需要获取真实的DOM元素，所以需要在mounted生命周期内进行。

二、特点

会使click事件失效

 会使tap事件失效

解决方案，在new的时候，设置click，tap为true

mounted(){
        this.scroll = new BScroll(this.$refs.wrapper,{
            tap:true,
            click:true
        })
    },

三、对better-scroll的二次封装

在better-scroll的封装文件中（vue）

<template>
    <div class="wrapper" ref="wrapper">
        <slot></slot>
    </div>
</template>

<script>
import BScroll from "better-scroll"
export default {
    name:"alley-BScroll",
    mounted(){
        this.scroll = new BScroll(this.$refs.wrapper,{
            tap:true,
            pullDownRefresh:true,//这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新
            pullUpLoad:true//这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载
        })
    },
    methods:{
        //下拉刷新加载数据
        handlepullingDown(callback){
             this.scroll.on("pullingDown",()=>{
                 callback();
             })
        },
        //下拉刷新加载数据完毕通知better-scroll
        handlefinishPullDown(){
            this.scroll.finishPullDown();//通知bettwer-scroll已经加载完毕
            this.scroll.refresh();//重新计算 better-scroll，当 DOM 结构发生变化的时候务必要调用确保滚动的效果正常。
        },
        //上拉加载更多
        handlepullingUp(callback){
            this.scroll.on("pullingUp",()=>{
                callback()
            })
        },
        handlefinishPullUp(){
            this.scroll.finishPullUp();
            this.scroll.refresh();
        }
    }
}
</script>


<style>
    .wrapper{
        height: 100%;
    }
</style>

在要使用该使用该封装的组件，只需要用这个组件将要出现效果的元素包裹起来即可，如下所示，包起来后，内容便可以有弹性的滑动了。

<alley-BScroll ref="alleyscroll">
      <div class="movie_body">
        <div
          class="movie_item"
          v-for="(item,index) in movieList"
          :key="index"
          @click="handleclick()"
        >
          <div class="movie_item_pic">
            <img :src="item.img |ToImg('128.180')" />
          </div>
          <div class="movie_item_info">
            <h2>{{item.nm}}</h2>
            <p>
              观众评:
              <span class="grade">{{item.sc}}</span>
            </p>
            <p>
              主演：
              <span>{{item.star}}</span>
            </p>
            <p>
              <span>{{item.showInfo}}</span>
            </p>
          </div>
          <div
            :class="item.globalReleased?'movie_item_btn asale':'movie_item_btn ticket'"
          >{{item.globalReleased?'购票':'预售'}}</div>
        </div>
      </div>
    </alley-BScroll>

接下来便可以调用封装组件里的方法了，因为需要获取DOM元素，便要写在mounted这个生命周期内。

mounted(){
  //下拉刷新
    this.$refs.alleyscroll.handlepullingDown(async ()=>{
      
        let n = parseInt(Math.random()*7);
        let arr = [10,1,20,40,50,55,59]



        let data = await movie_now_api(arr[n]);
        this.movieList = data.data.movieList;
        sessionStorage.setItem("movieList",JSON.stringify(data.data.movieList))
        this.$refs.alleyscroll.handlefinishPullDown();//下拉刷新完成后，通知better-scroll，下拉刷新已经完成。
    })


    //上拉加载更多
    this.$refs.alleyscroll.handlepullingUp(async ()=>{
        let n = parseInt(Math.random()*7);
        let arr = [10,1,20,40,50,55,59]
        let data = await movie_now_api(arr[n]);
        this.movieList = [...this.movieList,...data.data.movieList];
        sessionStorage.setItem("movieList",JSON.stringify(data.data.movieList))
        this.$refs.alleyscroll.handlefinishPullUp();
    })
  }