uni-app アプレット リスト ページの更新

ページをプルダウンして更新します

onPullDownRefresh は、ページ ユーザーのプルダウン更新イベントをリッスンします。

• で pages.json 、現在のページのページ ノードを見つけて、 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 に設定されている場合、ページが下から 50 ピクセルまでスクロールされると、onReachBottom イベントがトリガーされます。デフォルト値はは50です。
• スクロールビューによりページがスクロールされない場合、ボトミングイベントはトリガーされません

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>