uniapp 中上拉加载和下拉刷新
有一个好用的组件 这里附上官网地址
mescroll-uni
感兴趣的同学可以去看看
安装以及引入
可以在文档直接找到如下
选择自己喜欢的方式进行下载或者安装 这里不做详细介绍
步骤
找到
这个文件夹 放在自己的项目里,我是放在自己项目的公共组件 文件夹下 方便后续的使用 这个看个人习惯啦!
这个文件下会有很多文件 不要动直接复制文件夹就可以了
接下来就是非常简单的了 只需要3步 引入 注册 使用 啦!!!
1.引入
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";
2.注册
mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)
3.使用
<mescroll-uni :ref="'mescrollRef'+i"
@init="mescrollInit" height="100%" bottom="100" offset="0"
:down="downOption" @down="downCallback"
:up="upOption" @up="upCallback">
<uni-card :is-shadow="false" v-for="(item,index) in HistoryList" :key="item.id">
<view class="card-btn">
<view class="card-item">
{{item.orderSn}}
</view>
<view class="card-item">
{{item.senderAddress}}
</view>
<view class="card-item">
{{item.receiverAddress}}
</view>
<view class="card-item">
{{item.brandAndModel}}
</view>
<view class="card-item">
{{item.senderName}}
</view>
<view class="card-item">
<span class="orderStatusText">{{item.addTime}}</span>
</view>
<view class="card-item">
<span class="orderStatusText">{{item.confirmTime}}</span>
</view>
<view class="card-item">
</view>
<view class="card-item-picture">
<image :src="item.imageUrls.split(',')[0]" mode=""></image>
<image :src="item.imageUrls.split(',')[1]" mode=""></image>
<image :src="item.imageUrls.split(',')[2]" mode=""></image>
<image :src="item.imageUrls.split(',')[3]" mode=""></image>
</view>
</view>
</uni-card>
</mescroll-uni>
data() {
return {
activeName:'pending',
HistoryList:[],
downOption:{
auto:false // 不自动加载 (mixin已处理第一个tab触发downCallback)
},
upOption:{
auto:false, // 不自动加载
// page: {
// num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
// size: 10 // 每页数据的数量
// },
noMoreSize:51, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
empty:{
tip: '~ 空空如也 ~', // 提示
}
},
};
},
/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
async upCallback(page) {
const token = getToken();
if(this.activeName==='pending'){
this.showtype=2
}else{
this.showtype=3
}
const {data} = await getHistory(token,this.showtype, page.num, page.size)
const list = data.list
// 第一页则是下拉刷新,将原有数据清空
if(page.num === 1) {
this.HistoryList = []
this.mescroll.scrollTo(0,0)
}
// 追加新数据
this.HistoryList = this.HistoryList.concat(list)
this.mescroll.endBySize(this.HistoryList.length,data.total )判断当前数据是否已经加载完成
//演示为空情况
//this.mescroll.endSuccess(0)
},
到此关于下拉刷新上拉加载就完成啦 非常的省事 快去试试吧!!!