• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

混:微信动态生成tabs,list方案优化

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0705/5566.html 1190000019672281

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,
            })
        }
    },

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!