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>