uni-app小程序列表分页刷新

培根芝士

已于 2023-04-27 13:43:06 修改

阅读量646

点赞数

分类专栏： uni-app 文章标签：小程序 uni-app 前端

于 2023-04-21 15:28:02 首次发布

本文链接：https://blog.csdn.net/watson2017/article/details/130289184

版权

uni-app 专栏收录该内容

14 篇文章 3 订阅

订阅专栏

文章介绍了如何在uni-app中实现页面的下拉刷新和上拉加载功能。通过在pages.json配置enablePullDownRefresh启用下拉刷新，并在页面中监听onPullDownRefresh事件来处理数据更新，之后使用uni.stopPullDownRefresh停止刷新。对于上拉加载，利用onReachBottom事件和自定义滚动距离来触发加载更多数据。示例代码展示了具体实现细节。

摘要由CSDN通过智能技术生成

页面下拉刷新

onPullDownRefresh监听该页面用户下拉刷新事件

在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中开启 enablePullDownRefresh。
当处理完数据刷新后，uni.stopPullDownRefresh 可以停止当前页面的下拉刷新。
调用uni.startPullDownRefresh(OBJECT)后触发下拉刷新动画，效果与用户手动下拉刷新一致。

"pages": [
        {
        	"path": "pages/index/index",
        	"style": {
        		"navigationBarTitleText": "列表",
        		"enablePullDownRefresh": true
        	}
        }
    ],

export default {
	data() {
		return {
		}
	},
	onLoad: function (options) {
	},
	// 下拉加载
	onPullDownRefresh() {
		setTimeout(function () {
			uni.stopPullDownRefresh();
		}, 1000);
	},
	methods: {
	}
}

上拉加载下一页

onReachBottom监听页面滚动到底部的事件

在pages.json里定义具体页面底部的触发距离onReachBottomDistance，比如设为50，那么滚动页面到距离底部50px时，就会触发onReachBottom事件，默认值为50。
如使用scroll-view导致页面没有滚动，则触底事件不会被触发

export default {
	data() {
		return {
		}
	},
	onLoad: function (options) {
	},
	// 上拉加载
	onReachBottom() {
		if (this.msgList.length >= this.dataTotal) {
			return false
		}
		this.getList()
	},
	methods: {
	}
}

完整示例：

<template>
	<view class="container">
		<uni-table stripe emptyText="暂无更多数据">
			<!-- 表头行 -->
			<uni-tr>
				<uni-th width="60" align="center">编号</uni-th>
				<uni-th width="80" align="center">姓名</uni-th>
				<uni-th width="90" align="center">职位</uni-th>
				<uni-th width="80" align="center">日期</uni-th>
			</uni-tr>
			<!-- 表格数据行 -->
			<uni-tr v-for="(item,index) in msgList" :key="index" style="font-size: 10rpx;">
				<uni-td align="center">{{item.id}}</uni-td>
				<uni-td align="center">{{item.name}}</uni-td>
				<uni-td align="center">{{item.position}}</uni-td>
				<uni-td align="center">{{item.time}}</uni-td>
			</uni-tr>
		</uni-table>
		<view class="loading-more" v-if="isLoading || msgList.length > 10">
			<text class="loading-more-text">{{loadingText}}</text>
		</view>
	</view>
</template>

<script>
	import request from '@/request/request.js'
	export default {
		data() {
			return {
				dataTotal: 0,      //数据总数
				page: 0,           //页码
				isNoData: false,   //没有更多数据
				isLoading: false,  //加载中
				loadingText: '',    //加载文字
				msgList: [],      //数据列表
			}
		},
		onShow() {
			this.page = 0
			this.getList()
		},
		onLoad() {
		},
		// 上拉加载
		async onReachBottom() {
			if (this.msgList.length >= this.dataTotal) {
				return false
			}
			this.getList()
		},
        // 下拉刷新
		onPullDownRefresh() {
            this.page = 0
			this.getList()
		},
		methods: {
			// 获取列表
			async getList() {
				if (this.isLoading) {
					return
				}
				let params = {
					pageNum: this.page + 1,
					pageSize: 20
				}
				this.isLoading = true
				this.loadingText = '加载中...'
				let res = await request('user/userlist', params, 'GET')
				this.isLoading = false
                uni.stopPullDownRefresh()
				if (res.rspCode == '200') {
					this.dataTotal = res.data.dataTotal
					if (this.page == 0) {
						this.msgList = []
					}
					if (res.data.dataList.length > 0) {
						res.data.dataList.forEach((item) => {
							this.msgList.push(item)
						});
						this.page++;
					}
					this.isNoData = (this.msgList.length >= this.dataTotal);
				} else {
					this.isNoData = true;
					console.log(res.rspMsg)
				}
				if (this.isNoData) {
					this.loadingText = '没有更多了'
				}
			},
		},
	}
</script>