创建检查计划 _uniapp 我的消息列表">
当前位置:   article > 正文

uniapp 消息列表 下一项功能_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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/煮酒与君饮/article/detail/1015661
推荐阅读
相关标签