uni-app applet list page refresh

Page pull down to refresh

onPullDownRefresh listens to the page user's pull-down refresh event

• In  pages.json , find the pages node of the current page and  style enable it in the options  enablePullDownRefresh.
• After processing the data refresh, uni.stopPullDownRefresh you can stop the pull-down refresh of the current page.
• After calling uni.startPullDownRefresh(OBJECT), the pull-down refresh animation is triggered, and the effect is consistent with the user's manual pull-down refresh.

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

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

Pull up to load the next page

onReachBottom listens for the event that the page scrolls to the bottom

• Define the trigger distance onReachBottomDistance at the bottom of the specific page in pages.json, for example, if it is set to 50, then when the page is scrolled to 50px from the bottom, the onReachBottom event will be triggered, and the default value is 50.
• If the page is not scrolled due to scroll-view, the bottoming event will not be triggered

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

Full example:

<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>