赞
踩
查看消息列表的时候,会有下一项这个功能,(后端返回数据为数组时)如下图:
首先得判断下一项这个按钮是在什么情况下出现:
<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; } } },
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。