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

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