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>