当前位置：首页 > news >正文

uniapp上拉加载和下拉刷新组件mescroll-uni

news 来源：原创 2025/6/29 11:26:04

1. uniapp上拉加载和下拉刷新组件mescroll-uni

Decloud组件市场
在这里插入图片描述

1.1. 安装以及引入

高性能下拉刷新上拉加载组件支持
在这里插入图片描述

1.2. 步骤

在这里插入图片描述

1.2.1. 引入

import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import MescrollMoreItemMixin from "@/components/mescroll-uni/mixins/mescroll-more-item.js";

1.2.2. 注册

mixins: [MescrollMixin,MescrollMoreItemMixin], // 注意此处还需使用MescrollMoreItemMixin (必须写在MescrollMixin后面)

1.2.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, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5empty:{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)},