uniapp 消息列表 下一项功能_uniapp 我的消息列表

查看消息列表的时候，会有下一项这个功能，(后端返回数据为数组时)如下图：

首先得判断下一项这个按钮是在什么情况下出现：

<view class="flex-around mt-20">
				<view :class="count<2 ? 'bg-orange text-xl round-3 planWidth' : 'bg-theme text-xl round-3 px-n20 py-20'" v-if="isPlanShow" @click="addPlan">
				创建检查计划
				</view>
				<view :class="count<2 ? 'bg-theme text-xl round-3 planWidth' : 'bg-theme px-n25 py-20 text-xl round-3 mb-20'" @click="SignFor" v-else>
					签收
				</view>
				<view class="px-n25 py-20 text-xl round-3 mb-20"  style="border: 1px solid #3267a1;" v-show="isShowNextBtn == 1" @click="goNext" v-if="count>1">
					下一项
				</view>
			</view>
1
2
3
4
5
6
7
8
9
10
11

我是判断 列表数据大于一条的时候显示。

实现的想法就是：先存一个nextIndex，初始值为0，用来判断取list的第几组数据，在取完第一组数据后，nextIndex++；在点击下一项的时候，nextIndex就变成了1，就是数组的第二项，依次累加，在nextIndex的值等于count总条数时，隐藏下一项按钮。

getMsgData() { // 接口获取数据
	this.$u.api.msg.listData({
		pushed: false,
		isNotifyMsg:1,
		receiveStatus:0,
		isPopupWindow:1,
	}).then(res => {
		uni.hideToast();
		if (res) {
		   this.count = res.count ? res.count : 0;
		   this.msgList = res.list; // 接口的数组存到一个数组里 减少调接口的次数
		   if(this.count>0){
			   let item = this.msgList[this.nextIndex]; // nextIndex初始默认是0  取到第一组数据
			   this.notifyTitle = item.msgContentEntity.tplData.notifyTitle;
			   this.notifySubTitle = item.msgContentEntity.tplData.notifySubTitle;
			   this.notifyObjectId = item.msgContentEntity.tplData.notifyObjectId;
			   this.msgId = item.notifyMsgInfo.msgId;
			   this.sendDate = item.sendDate;
			   if(item.bizType=='notifyPlanCheck'){ // 判断头部展示的标签
					this.isOther = 0
			   } else{
					this.isOther = 1
			   }
					this.nextIndex++  // nextIndex自加1 点下一步的时候取的就是第二组数据
					if(this.nextIndex == this.count){  // nextIndex的值等于总条数时 隐藏‘下一项’按钮
					this.isShowNextBtn = 0;
					}
				}
			}
		})
	},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

goNext() {	 // 点击下一项的时候 再取一次值
	if(this.nextIndex<=this.count){
	let item = this.msgList[this.nextIndex];
	this.notifyTitle = item.msgContentEntity.tplData.notifyTitle;
	this.notifySubTitle = item.msgContentEntity.tplData.notifySubTitle;
	this.notifyObjectId = item.msgContentEntity.tplData.notifyObjectId;
	this.msgId = item.notifyMsgInfo.msgId
	this.sendDate = item.sendDate;
	if(item.bizType=='notifyPlanCheck'){
		this.isOther = 0
	} else{
		this.isOther = 1
	}
		this.nextIndex++;
	if(this.nextIndex == this.count){
		this.isShowNextBtn = 0;
		this.count = 0;
		}
	}
},
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20