![clipboard.png clipboard.png](http://static.javashuo.com/static/loading.gif)
在實現上圖的開發過程當中,總結了一套代碼整潔的tabs-list的開發方式
分析邏輯:
①tabs能夠當作一個json(好處在於經過wx:for能夠動態生成,choosestatus能夠用來對應下面的數據)
[{ name:"待兌換",
chooseStatus:"effectCoupon"
},{
name:"已兌換",
chooseStatus:"overdueCoupon"
},{
name:"已過時",
chooseStatus:"usedCoupon"
}],
②因爲種種緣由,接口返回的3個list是分開的。這就是choosestatus的做用,和返回的3個list字段一一對應,經過變量,動態改變選中樣式和存儲list的數組
get_yhq_list: function (e) {
var _this = this;
var clickId = e.currentTarget.dataset.index; //把點擊的索引傳遞過來,改變顯示隱藏的數組的布爾值來改變樣式
var clickStatus = e.currentTarget.dataset.choose; //把點擊的參數傳遞過來
_this.data.is_tab_on = [false,false,false];
_this.data.is_tab_on[clickId] = true;
if(_this.data[clickStatus].length > 0){
_this.setData({
is_no_data:false,
is_tab_on:_this.data.is_tab_on,
CardList:_this.data[clickStatus]
})
}else{
_this.setData({
CardList:[],
is_tab_on:_this.data.is_tab_on,
is_no_data:true,
})
}
},