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>

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

实现的想法就是:先存一个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;
					}
				}
			}
		})
	},
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;
		}
	}
},
  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

屿-·

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值