uniapp 下拉刷新

官方使用说明

1.导入插件

• uniapp插件市场 搜索 【wxs+renderjs实现】高性能的下拉刷新上拉加载组件
• 组件下载地址
  
  组件位置

2.引入

• script中引入

import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
export default {
    mixins: [MescrollMixin], // 使用mixin
    data() {
        return {
        }
    }
},

3.使用

• 绘制页面
  创建一个用于加载mescroll-uni的view，可以自定义大小，位置

<view class="content">
  <view style="position: fixed;left: 0;right: 0;width: 100%;top: 140rpx;bottom: 0rpx;">
    <mescroll-uni ref="mescrollRef" :fixed="false" @init="mescrollInit" @down="downCallback" @up="upCallback">
        <view v-for="item in hotelList" @click="listClick" :data-id="item.id" class="hotel-list">
            <image class="image" :src="item.image"></image>
                    
        </view>
    </mescroll-uni>
  </view>
</view>

特别注意 view的父视图需要有一个高度，page也需要一个高度

page{
    background-color: white;
    height: 100%;
}
.content{
    display: flex;
    flex-direction: column;
    width: 100%;
    background-color: #fff;
    height: 100%;
    min-width: 0;
    min-height: 0;
}

• methods中调用upCallback方法

upCallback(page) {
                // 此处可以继续请求其他接口
                // if(page.num == 1){
                //  // 请求其他接口...
                // }
                
                // 如果希望先请求其他接口,再触发upCallback,可参考以下写法
                // if(!this.isInitxx){
                //  apiGetxx().then(res=>{
                //      this.isInitxx = true
                //      this.mescroll.resetUpScroll() // 重新触发upCallback
                //  }).catch(()=>{
                //      this.mescroll.endErr()
                //  })
                //  return // 此处return,先获取xx
                // }
                
                //联网加载数据
            //  apiGoods(page.num, page.size).then(res=>{
            //      //联网成功的回调,隐藏下拉刷新和上拉加载的状态;
            //      //mescroll会根据传的参数,自动判断列表如果无任何数据,则提示空;列表无下一页数据,则提示无更多数据;
            
            //      //方法一(推荐): 后台接口有返回列表的总页数 totalPage
            //      //this.mescroll.endByPage(res.list.length, totalPage); //必传参数(当前页的数据个数, 总页数)
            
            //      //方法二(推荐): 后台接口有返回列表的总数据量 totalSize
            //      //this.mescroll.endBySize(res.list.length, totalSize); //必传参数(当前页的数据个数, 总数据量)
            
            //      //方法三(推荐): 您有其他方式知道是否有下一页 hasNext
            //      //this.mescroll.endSuccess(res.list.length, hasNext); //必传参数(当前页的数据个数, 是否有下一页true/false)
            
            //      //方法四 (不推荐),会存在一个小问题:比如列表共有20条数据,每页加载10条,共2页.如果只根据当前页的数据个数判断,则需翻到第三页才会知道无更多数据
            //      this.mescroll.endSuccess(res.list.length);
            
            //      //设置列表数据
            //      if(page.num == 1) this.goods = []; //如果是第一页需手动制空列表
            //      this.goods=this.goods.concat(res.list); //追加新数据
            //  }).catch(()=>{
            //      //联网失败, 结束加载
            //      this.mescroll.endErr();
            //  })
                this.getHotelList(page.num,page.size)
            },
            getHotelList(num,size){
                let params = { 
                    "data": {
                       
                    }
                }
                let that = this;
                hotelGetList(params).then(successData=>{
                    let dataList = successData.hotellist;
                    let totalPage = successData.total;
                    /*核心代码*/
                    let hasNext = dataList.length>0?true:false
                    this.mescroll.endSuccess(dataList.length, hasNext);
                    if(num>1){
                        dataList = that.hotelList.concat(dataList);
                        if(dataList.length>=totalPage){
                            that.pageindex-=1;
                        }
                    }
                    that.hotelList = dataList;
                })
                .catch(err =>{
                    console.log(err);
                })
            },