查看消息列表的时候,会有下一项这个功能,(后端返回数据为数组时)如下图:
首先得判断下一项这个按钮是在什么情况下出现:
<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;
}
}
},