微信小程序> 微信小程序的产品分类显示的实现

微信小程序的产品分类显示的实现

浏览量:674 时间: 来源:长木木木

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  /view

wxss:

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

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎