混:微信動態生成tabs,list方案優化

clipboard.png

在實現上圖的開發過程當中,總結了一套代碼整潔的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,
            })
        }
    },
相關文章
相關標籤/搜索