wxml:
view class='tab-container' view class='tab-list' block wx:for="{{pres}}" view class="{{item.id == id?'click':'noclick'}}" bindtap='click' data-id="{{item.id}}" {{item.preX}}/view /block /view view view class='tab-detail clear' block wx:for="{{goods}}" view class='tab-item' image src='{{item.url}}'/image view{{item.name}}/view /view /block /view /view /viewwxss:
/* tab选项卡 */.tab-container{ position:relative;}.tab-list{ width:200rpx; height:550rpx; }.tab-listview{ width:100%; height:110rpx; line-height:110rpx; text-align:center; font-size:32rpx;}.noclick{ background:#f9f9f9; color:#333333;}.click{ background:#fff; color:#ff7e00;}.tab-detail{ position:absolute; top:10rpx; left:200rpx; width:550rpx; box-sizing:border-box; background:#fff;}/* 商品详情 */.tab-item{ width:180rpx; height:180rpx; text-align:center; font-size:30rpx; float:left;}.tab-itemimage{ width:125rpx; height:125rpx; display:block; margin:0 auto;}js:
page({ data:{ pres: [ { id:"0", preX: "推荐分类" }, { id: "1", preX: "食品生鲜" }, { id: "2", preX: "潮流女装" }, { id: "3", preX: "品牌男装" }, { id: "4", preX: "医疗器械" } ], goods:[ { id: 0, name: "苹果", url:"/img/1.png"}, { id: 1, name: "香蕉", url: "/img/2.png"}, ], id: 0, }, // 单击改变样式 click: function (e) { var ids = e.currentTarget.dataset.id; //获取自定义的id var good = ""; if(ids == 0){ good = [ { id: 0, name: "苹果", url: "/img/1.png" }, { id: 1, name: "香蕉", url: "/img/2.png" }, ]; } else if (ids == 1){ good = [ { id: 0, name: "芒果", url: "/img/3.png" }, { id: 1, name: "葡萄", url: "/img/4.png" }, ]; } else if (ids == 2) { good = [ { id: 0, name: "火龙果", url: "/img/5.png" }, { id: 1, name: "猕猴桃", url: "/img/6.png" }, ]; }else if (ids == 3) { good = [ { id: 0, name: "黑加仑", url: "/img/7.png" }, { id: 1, name: "牛油果", url: "/img/8.png" }, ]; }else if(ids == 4){ good = [ { id: 0, name: "苹果", url: "/img/1.png" }, { id: 1, name: "芒果", url: "/img/3.png" }, ]; } this.setData({ id: ids, //把获取的自定义id赋给当前组件的id(即获取当前组件) goods: good }) },













