由于業(yè)務(wù)需求,在補(bǔ)貨詳情頁面粟焊,可以查看上一條冤狡、下一條數(shù)據(jù),所以前端需要處理一下邏輯吆玖,覺得這個功能還挺有意思筒溃,并可能以后還會用到,特在此總結(jié)記錄一下
// 顯示上一臺沾乘、下一臺
btnShowFn(currId) {
if (this.finishedList.length > 1) { // 如果當(dāng)前有大于1條的數(shù)據(jù)
const index = this.finishedList.findIndex(v => {
return v.id === currId;
})
if (index === 0) { // 如果當(dāng)前是第一項(xiàng)
this.showNext = true;
}
if (index === this.finishedList.length -1) { // 如果當(dāng)前是最后一項(xiàng)
this.showPre = true;
}
if (index !==0 && index !== this.finishedList.length -1) { // 如果當(dāng)前既不是第一項(xiàng)怜奖,又不是最后一項(xiàng)
this.showNext = true;
this.showPre = true;
}
},
// 上一臺
changePre() {
const index = this.finishedList.findIndex(v => {
return v.id === this.currId;
})
if (index - 1 === 0) { // 如果點(diǎn)擊上一臺之后翅阵,發(fā)現(xiàn)到了第一項(xiàng)
this.showPre = false;
}
this.currId = this.finishedList[index - 1].id;
this.btnShowFn(this.currId);
this.initData(this.vemId);
},
// 下一臺
changeNext() {
const index = this.finishedList.findIndex(v => {
return v.id === this.currId;
})
if (index + 1 === this.finishedList.length - 1) { 如果點(diǎn)擊下一臺之后歪玲,發(fā)現(xiàn)到了最后一項(xiàng)
this.showNext = false;
}
this.currId = this.finishedList[index + 1].id;
this.vemId = this.finishedList[index + 1].vemId;
this.btnShowFn(this.currId);
this.initData(this.vemId);
}
至此,前一條掷匠、后一條整個邏輯完成