uniapp——list列表分页,数据是rows

html

javascript 复制代码
	<view class="plr-30">
		<empty v-if="list.length==0&&status != 'loading'" top="280"></empty>
		<view class="mt-30 mb-50" v-for="(item,i) in list" :key="i" @click="toDetail(item)">
			<view class="size-32 u-line-2">{{item.title}}</view>
		</view>
		<u-loadmore v-show="list.length>9" :status="status" icon-type="flower" bg-color="transperant" margin-top="30" margin-bottom="30" />
  </view>
		

data

javascript 复制代码
		data() {
			return {
				page: 1,
				status: 'loadmore',
				list: [],
			}
		},

方法

javascript 复制代码
			getList() {
				this.status = "loading";
				this.$http('/other/news/listApp', {
					pageNum: this.page,
					pageSize: 10
				}).then(res => {
					let data = res.rows
					// ********* 解决重复tab切换接口慢数据拼接问题,如果是第一页不拼接
					this.list = this.page == 1 ? data : this.list.concat(data)
					// ****** 根据总条数计算总页数 
					let total = parseInt(res.total / 10) + ((res.total % 10) == 0 ? 0 : 1)
					if (this.page == total) {
						this.status = "nomore"
					} else {
						this.page = this.page + 1
						this.status = "loadmore"
					}
					uni.stopPullDownRefresh();
				})
			},
			update() {
				this.page = 1
				this.list = []
				this.getList()
			},
			

下拉、触底

javascript 复制代码
		onPullDownRefresh() {
			this.update()
		},
		onReachBottom() {
			//避免多次触发
			if (this.status == 'loading' || this.status == 'nomore') {
				return;
			}
			this.getList()
		},
相关推荐
皮卡蛋炒饭.1 小时前
数据结构—排序
数据结构·算法·排序算法
??tobenewyorker2 小时前
力扣打卡第23天 二叉搜索树中的众数
数据结构·算法·leetcode
sniper_fandc3 小时前
Redis数据类型之list
数据库·redis·list
艾莉丝努力练剑5 小时前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(五)
c语言·开发语言·数据结构·学习·算法
xienda5 小时前
冒泡、选择、插入排序:三大基础排序算法深度解析(C语言实现)
数据结构·算法·排序算法
future14125 小时前
游戏开发日记7.12
数据结构·学习·c#·游戏开发
默魔6 小时前
uniapp 微信小程序点击开始倒计时
微信小程序·小程序·uni-app
皮卡蛋炒饭.6 小时前
数据结构——堆
数据结构·算法
JuneXcy6 小时前
第七章应用题
数据结构
大白话讲知识7 小时前
代码随想录算法训练营第三十一天|738.单调递增的数字 968.监控二叉树
数据结构·算法