vue-better-scroll實現移動端下拉加載組件

1.下載安裝better-scroll

npm i -S better-scroll

1.1安裝完成之后，打開pacaage.json文件查看，是否有（better-scroll）

"dependencies": {
    "axios": "^0.19.0",
    //已安裝better-scroll
    "better-scroll": "^1.15.2",
    "core-js": "^2.6.5",
    "vue": "^2.6.10",
    "vue-router": "^3.0.3",
    "vuex": "^3.0.1"
  },

2.在components下創建組件Scrooller

<template>
    <div class="wrapper" ref="wrapper">
        <!-- 內容分發 -->
        <slot></slot>
    </div>
</template>

<script>
import BScroll from 'better-scroll';
    export default {
        name: 'Scroller',
        // 父子通信
        props : {
            handleToScroll : {
                type : Function,
                // 默認一個空的方法 防止報錯
                default : function(){},
            },
            handleToTouchEnd : {
                type:Function,
                default: function(){}
            }
        },
        mounted(){
              //接收兩個參數 1.找到最外層包裹的容器 dom元素 2.配置元素 true 開啟配置
            var scroll = new BScroll( this.$refs.wrapper,{
                tap:true,
                probeTybe: 1
            });

            scroll.on('scroll',(pos) => {
                this.handleToScroll(pos);
            });

            scroll.on('touchEnd',(pos) => {
                this.handleToTouchEnd(pos);
            })
        }
    }
</script>

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

2.1在main.js中全局注冊Scroller

// scroller全局組件
import Scroller from '@/components/Scroller/Scroller.vue'
Vue.component('Scroller',Scroller);

3.在views中引入Scroller組件

<template>
    <div class="movie_body" ref="movie_body">
        <!-- 父子間傳遞方法 -->
        <Scroller :handleToScroll="handleToScroll" :handleToTouchEnd="handleToTouchEnd">
            <ul>
                <li class="pulldown">內容</li>  
            </ul>
        </Scroller>
    </div>
</template>
<script>
// import BScroll from 'better-scroll';

    export default {
        name: 'name',
        data(){
            return {
    
                movieList : [],
                //加載狀態
                pullDownMsg : ''
            }
        },
        mounted(){
            this.axios.get('接口').then((res) => {
               //處理數據並賦值給movieList
            })
        },
        methods:{
            //調用組件中的方法
            handleToScroll(pos){
              //y軸下拉高度大於30時，改變pullDownMsg
                if( pos.y > 30){
                    this.pullDownMsg = '正在加載...'
                }
            },
          //調用組件中的方法
            handleToTouchEnd(pos){
                if(pos.y > 30){
                    // 發起ajax
                    this.axios.get(’接口').then((res) => {
                        var msg = res.data.msg;
                        if(msg === 'ok'){
                            this.pullDownMsg = '加載完成！';
                            //延遲一秒
                            setTimeout(() =>{
                                this.movieList = res.data.list;
                                this.pullDownMsg = ''
                            },1000)
                        }
                    })
                }
            }
        }
    }
</script>