uniapp 利用uni-list 和 uni-load-more 组件上拉加载列表

复制代码
	列表的加载动作,在移动端开发中随处可见,笔者也是经常用到。今天正好有空,做一个总结,方便以后使用。
	uniapp 利用uni-list 和 uni-load-more 组件上拉加载列表操作步骤如下:

1、资料准备

1)、uni-load-more组件:uni-load-more

基本用法:

javascript 复制代码
<uni-load-more status="more"></uni-load-more>

2)、uni-list组件:uni-list

基本用法

设置 title 属性,可以显示列表标题

设置 disabled 属性,可以禁用当前项

javascript 复制代码
<uni-list>
	<uni-list-item  title="列表文字" ></uni-list-item>
	<uni-list-item :disabled="true" title="列表禁用状态" ></uni-list-item>
</uni-list>

2.效果图:

3、前端代码:

javascript 复制代码
	<view>
		<view class="tuijian">
			<image src="../../static/kehu/u841.svg"></image>
			<text >推荐客户</text>
		</view>
		<view class="list" >
			<uni-list v-for="(item ,index) in lists" :key="index" >
				<uni-list-item showArrow :title="item.name" :note="item.sjhm" :rightText="item.statetext"  clickable  @click="onClick()"></uni-list-item>
			</uni-list>
			
			<uni-load-more :status="status" :icon-size="14" :content-text="contentText"  />
		</view>


	</view>

4、样式文件

css 复制代码
<style>
	page{
		height: 100vh;
		background-color: #F5F6FA;
		overflow-y: auto;
	}
		
	.list{
		height: calc(100vh - 130rpx);
		/* overflow-y: auto; */
	}
	.tuijian{
		width: 710rpx;
		height: 94rpx; 
		line-height: 94rpx; 
		margin: 20rpx;
		background-color: rgba(14, 196, 153, 1);
		box-sizing: border-box;
	}
	.tuijian image{
		width: 30rpx;height: 30rpx; margin-left: 40rpx; margin-right: 20rpx;
	}
	.tuijian text{
		font-size: 36rpx;color: #fff;text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.647058823529412);
	}
</style>

5、data数据设置

javascript 复制代码
status: 'more',
ifBottomRefresh: false,//是否触底				
totalCount: 1,
params: {
    pageNo: 1,
    pageSize: 8
},
contentText: {
	contentdown: '加载更多~',
	contentrefresh: '加载中',
	contentnomore: '我是有底线的~'
},
lists: [],

6、列表获取方法

javascript 复制代码
	//获取列表
	async getList(){
		let paramJson = {
			page:this.params.pageNo,
			limit:this.params.pageSize,
		};
		let { code,data,total } = await app.getReferrerListByPage(paramJson);
		// console.info(data)
		if(200 == code){
			// //请求接口成功之后,判断加载状态,处理数据
			this.totalCount = total;
			if(this.params.pageNo == 1){
				this.lists= data
			}else{
				this.lists= this.lists.concat(data);						
			}
			
			if (this.params.pageNo * this.params.pageSize >= total) {
				this.status = 'noMore';
			}
			
			this.params.pageNo++;
		}		
	}

7、触底加载方法

javascript 复制代码
//触底加载
onReachBottom() {
	if (this.status != 'noMore') {
		this.status = 'loading';
		this.getList()
	} else {
		this.status ="noMore"
	}
}

8、最后一步

最后一步,还需开启上拉加载事件。

javascript 复制代码
"enablePullDownRefresh" : true,
"onReachBottomDistance":100,
相关推荐
Javashop_jjj15 小时前
三勾软件| 用SpringBoot+Element-UI+UniApp+Redis+MySQL打造的点餐连锁系统
spring boot·ui·uni-app
Q_Q51100828521 小时前
python+uniapp基于微信小程序的心理咨询信息系统
spring boot·python·微信小程序·django·flask·uni-app·node.js
HuYi_code1 天前
WeChat 小程序下载文件实现
微信小程序·uni-app
00后程序员张1 天前
HTTPS 包 抓取与分析实战,从抓包到解密、故障定位与真机取证
网络协议·http·ios·小程序·https·uni-app·iphone
2501_915921431 天前
iOS混淆与IPA加固实战手记,如何构建苹果应用防反编译体系
android·macos·ios·小程序·uni-app·cocoa·iphone
Q_Q5110082851 天前
python+uniapp基于微信小程序的学院设备报修系统
spring boot·python·微信小程序·django·flask·uni-app
ღ᭄ꦿ࿐Never say never꧂1 天前
微信小程序 Button 组件 open-type 完全指南:从用户信息获取到客服分享的实战应用
spring boot·微信小程序·小程序·uni-app·vue3
你真的可爱呀1 天前
uniapp学习【路由跳转 +数据请求+本地存储+常用组件】
前端·学习·uni-app
2501_915106321 天前
iOS 26 APP 性能测试实战攻略:多工具组合辅助方案
android·macos·ios·小程序·uni-app·cocoa·iphone
00后程序员张2 天前
iOS混淆与IPA文件加固全流程实战 防止苹果应用被反编译的工程级方案
android·ios·小程序·https·uni-app·iphone·webview