mescroll-uni下拉刷新、上拉加载的使用

在开发uni-app项目时，mescroll组件是一个很好解决下拉刷新、上拉加载的组件，它的流畅性很好，现在还没发现啥大问题

链接：http://www.mescroll.com/api.html?v=20200807

最好下载引用包，不要使用npm，全局会报错

 

这里只是借用了它的方法，没有按它原始的配置来做

目前使用的是mescroll-uni组件，相当于scroll-view局部滑动

下面是我已经写完测试的demo

　　

 

html部分

　　

<template>
    <view class="box">
        <view class="tab_box">
            <view class="tab_list" :class="tab_index===index?'tab_on':''" v-for="(item,index) in tab_list" @click="tabChange(index)">{{item}}</view>
        </view>
        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="refreshChange" @up="loadChange" :down="down" :up="up" :fixed="true" :top="80">
            <block v-for="(item,index) in list" :key='index' >
                <view class="list">
                    <view class="name">{{item.name}}</view>
                    <view class="value">{{item.value}}</view>
                </view>
            </block>
        </mescroll-uni>
    </view>
</template>

mescrollInit：初始化回调，返回mescroll对象

refreshChange：下拉回调，返回mescroll对象

loadChange：上拉回调，返回mescroll对象

fixed：是否使用固定定位，默认会自动计算高度

height:使用高度，则fixed不生效

up、down：参数详见文档

js部分

<script>
    import MescrollMixin  from '@/components/mescroll-uni/mescroll-mixins.js'
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
    export default {
        name: "approval-temp",
        data(){
          return{
              mescroll:null,
              up:{
                  auto:false //默认开始不执行上拉
              },
              down:{
                  auto:false //默认开始不执行下拉
              },
              list:[],
              hasNext:true,  //上拉是否有值
              tab_list:['索隆','山治'],
              tab_index:0
          }
        },
        mixins:[MescrollMixin], //引入mescroll内置方法
        components:{
            MescrollUni
        },
        mounted() {
            let list=[]
            let tmp1={
                name:'多弗朗明哥',
                value:'100'
            }
            let tmp2={
                name:'路飞',
                value:'99'
            }
            for(let i=0;i<5;i++){
                let new_tmp1=JSON.parse(JSON.stringify(tmp1))
                let new_tmp2=JSON.parse(JSON.stringify(tmp2))
                new_tmp1.name+=i
                new_tmp2.name+=i
                list.push(new_tmp1,new_tmp2)
            }
            this.list=list
        },
        methods:{
            mescrollInit(mescroll) {
                console.log('mescrollInit')
                this.mescroll = mescroll;
            },
            refreshChange(data={}){
                console.log('refresh')
                this.mescroll.removeEmpty()  //移除空布局，主要是第一次无值，第二次有值
                this.mescroll.showUpScroll()//显示上拉加载，主要用于标签1加载完END，切换标签2时默认替换END(有切换标签时调用)
                this.list=[]
                this.hasNext=true  //初始化有值
                this.page_no=1
                this.getList(data);
            },
            loadChange(){
                console.log('load')
                this.page_no++
                this.getList();
            },
            getList(data={}){
                let page_no=this.page_no
                let params={
                    page_no,
                }
                params={...params,...data}
                this.requestData(params).then(()=>{ //模拟请求
                    if(!this.list.length){    //这里是通过list总长度判断的
                        this.mescroll.endUpScroll(false)    //隐藏上拉加载，false为隐藏，其他参考文档(有showUpScroll时调用)
　　　　　　　　　 　　　　　this.mescroll.endDownScroll() 　　　 //隐藏下拉刷新
                        this.mescroll.showEmpty()           //显示空布局
                    }else {
                        this.mescroll.endSuccess(20,this.hasNext)  //数量大于默认数量10，否则无法上拉加载,或者修改endSuccess原方法
                    }
                });
            },
            requestData(data){
                let temp={
                    name:'大妈',
                    value:'666'
                }

                return new Promise(resolve => {
                    setTimeout(()=>{
                        let list=this.list;
                        let arr=[]
                        for(let i=0;i<10;i++){
                            let new_tmp=JSON.parse(JSON.stringify(temp))
                            new_tmp.name+=i
                            arr.push(new_tmp)
                        }

                        if(data.page_no===1){
                            list=arr
                        }else {
                            list=list.concat(arr)
                        }
                        this.list=list
                       if(this.list.length>20){  //默认结束
                           this.hasNext=false
                       }
                       resolve();
                    },500)
                })
            },
            tabChange(index){
                if(this.tab_index!==index){
                    this.tab_index=index;
                    this.refreshChange();
                }
            }
        }
    }
</script>