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);
})
},
