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();
    })
  }