uniapp实现上拉刷新，下拉加载
上拉刷新，下拉加载这个功能实际上在我们的应用当中使用范围是很广的，比如说商城中心在展示商品的时候就可以使用下拉加载这样的功能，那么如何实现呢？
首先遇到这个功能我就去搜插件市场了。经过我下载了不少的插件，我发现了一个非常不错的插件。
插件地址：
https://ext.dcloud.net.cn/plugin?id=343
官网地址：
http://www.mescroll.com/uni.html#load
这个官网里面的示例和讲解是非常清楚的，通过示例我们可以照着实现这个功能。
刷新的示例代码：
在项目中使用：
// An highlighted block
template部分：
<!-- top="xxx"下拉布局往下偏移,防止被悬浮菜单遮住 -->
<mescroll-uni top="120" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback" @emptyclick="emptyClick" @init="mescrollInit">
<!-- 数据列表 -->
<pd-list :list="pdList"></pd-list>
</mescroll-uni>
script部分：
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import PdList from "@/components/other/pd-list.vue";
import mockData from "@/common/pdlist.js"; // 模拟数据
export default {
components: {
MescrollUni,
PdList
},
data() {
return {
mescroll: null, //mescroll实例对象
downOption:{
auto:false, // 不自动加载
},
upOption:{
auto:false, // 不自动加载
// page: {
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
// size: 10 // 每页数据的数量
// },
noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty:{
tip: '~ 空空如也 ~', // 提示
btnText: '去看看'
}
},
pdList: [], //列表数据
isInit: false, // 列表是否已经初始化
scrollY: 0
}
},
props:{
i: Number, // 每个tab页的专属下标
index: { // 当前tab的下标
type: Number,
default(){
return 0
}
}
},
watch:{
// 监听下标的变化
index(val){
if (this.i === val && !this.isInit) {
this.isInit = true; // 标记为true
this.mescroll.triggerDownScroll();
}
}
},
mounted() {
// 第一个tab,自动加载数据
if(this.i === 0){
this.isInit = true; // 标记为true
this.mescroll.triggerDownScroll();
}
},
methods: {
// mescroll组件初始化的回调,可获取到mescroll对象
mescrollInit(mescroll) {
this.mescroll = mescroll;
},
/*下拉刷新的回调 */
downCallback(mescroll) {
// 这里加载你想下拉刷新的数据, 比如刷新轮播数据
// loadSwiper();
// 下拉刷新的回调,默认重置上拉加载列表为第一页 (自动执行 mescroll.num=1, 再触发upCallback方法 )
mescroll.resetUpScroll()
},
/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
upCallback(mescroll) {
//联网加载数据
this.getListDataFromNet(mescroll.num, mescroll.size, (curPageData)=>{
//联网成功的回调,隐藏下拉刷新和上拉加载的状态;
console.log("i="+this.i+", mescroll.num=" + mescroll.num + ", mescroll.size=" + mescroll.size + ", curPageData.length=" + curPageData.length);
mescroll.endSuccess(curPageData.length);
//设置列表数据
if(mescroll.num == 1) this.pdList = []; //如果是第一页需手动制空列表
this.pdList=this.pdList.concat(curPageData); //追加新数据
}, () => {
//联网失败的回调,隐藏下拉刷新的状态
mescroll.endErr();
})
},
//点击空布局按钮的回调
emptyClick(){
uni.showToast({
title:'点击了按钮,具体逻辑自行实现'
})
},
/*联网加载列表数据
在您的实际项目中,请参考官方写法: http://www.mescroll.com/uni.html#tagUpCallback
请忽略getListDataFromNet的逻辑,这里仅仅是在本地模拟分页数据,本地演示用
实际项目以您服务器接口返回的数据为准,无需本地处理分页.
* */
getListDataFromNet(pageNum,pageSize,successCallback,errorCallback) {
//延时一秒,模拟联网
setTimeout(()=> {
try{
let listData = []
if (this.i === 0) {
for (let i = (pageNum - 1) * pageSize; i < pageNum * pageSize; i++) {
if (i === mockData.length) break
listData.push(mockData[i])
}
} else{
let wordArr = ['', '奶粉', '面膜', '图书']
let word = wordArr[this.i]
for (let i = 0; i < mockData.length; i++) {
if (mockData[i].pdName.indexOf(word) !== -1) {
listData.push(mockData[i])
}
}
}
// 回调
successCallback && successCallback(listData);
} catch (e) {
//联网失败的回调
errorCallback && errorCallback();
}
},1000)
}
}
}
注意:这个插件本身是基于scoll的，所以不能在这个插件当中使用scoll。但是呢，我在项目当中有时候必须使用scoll的时候，我就发现可以自己来设置上拉加载。
我们可以在需要上拉加载的位置上写上一行小字：上拉加载更多，然后呢对这行字设置点击事件：
<view v-if="more" class="getmore" @tap="getmoreorder">加载更多...</view>
之后呢设置加载中的动画和当没有商品时进行提示“没有更多了”：
<!--加载loadding-->
<tui-loadmore :visible="loadding" :index="3" type="red"></tui-loadmore>
<tui-nomore :visible="nomore" bgcolor="#fafafa"></tui-nomore>
然后在js中写上点击加载更多之后的代码：
this.loadding = true;
this.orderpage = this.orderpage + 1;
let param = {
//给后端传的数据
}
ApiGetOrder(param).then(({
data
}) => {
if (data.status == 0) {
this.loadding = false;
this.oldorderList = [...data.msg];
if(this.oldorderList.length < this.pagenum){
this.nomore = true;
this.more = false;
}else{
this.more = true;
}
this.orderList = this.orderList.concat([...data.msg]);
}
})
今天的记录就到此结束啦，有问题的话可以进行指出，谢谢大家！