/* pages/mySelf/name/name.wxss */ /*分栏*/ .fen_margin_red_{ margin:10px 4px 10px 4px; } .border_padding{ border-bottom:1px solid #F8F8F8; padding:10px 5px 10px 4px; } .background_corlor{ color:red; background: #F8F8F8; } /*各类推荐*/ .flex-item{ width: 175rpx; height: 160rpx; border:3rpx solid #F8F8F8; margin-right:-1px; margin-bottom:-1px; float: left; background: white; display: block; } |
Page({ data: { classifyData: [ { name: '品牌男装' }, { name: '潮流女装' }, { name: '家用电器' }, { name: '鞋靴箱包' }, { name: '厨房用品' }, { name: '家居建材' }, { name: '手机数码' } ], brandData: [ { name: '品牌推荐', item: [ { name: '美的' }, { name: '海尔' }, { name: '格力' }, { name: '飞利浦' }, { name: '华帝' }, { name: '海信' }, { name: '九阳' }, { name: '三洋' }, { name: '三星' },] }, { name: '电视', item: [ { name: '合资品牌' }, { name: '国产品牌' }, { name: '互联网品牌' }] }, { name: '空调', item: [ { name: '悬挂式空调' }, { name: '柜式空调' }, { name: '空调配件' }, { name: '中央空调' } ] } ] }, onLoad: function (options) { console.log(options.name); }, //单击改变分栏的显示状态 backgroundClick: function (e) { console.log('backgroundClick', e) console.log('toggle', e.target.dataset.toggle) if (e.target.dataset.toggle == undefined) { this.data.classifyData[e.target.dataset.index].toggle = true; for (var i = 0; i < this.data.classifyData.length; i++) { if (i != e.target.dataset.index) { this.data.classifyData[i].toggle = undefined; } } this.setData({ classifyData: this.data.classifyData }) } } }) |
<view class="row"> <view class="col"> <!--分栏--> <view class="col-3" style="background:white;height:100%;"> <block wx:for="{{classifyData}}"> <view class="row border_padding {{item.toggle ? 'background_corlor' : ''}}"> <view class="col x-center" bindtap="backgroundClick" data-index="{{index}}" data-toggle="{{item.toggle}}"> {{item.name}} </view> </view> </block> </view> <!--各类推荐--> <view class="col-9" style="background:#F8F8F8;padding:0px 0px 0px 7px"> <block wx:for="{{brandData}}"> <view class="row"> <view class="col" style="color:red;"> {{item.name}} </view> </view> <view class="row x-center"> <view class="col"> <view class="col-12"> <block class="" wx:for="{{item.item}}"> <view class="flex-item" style="background:white;"> <text>{{item.name}}</text> </view> </block> </view> </view> </view> </block> </view> </view> </view> |
模板简介:该模板名称为【实现微信小程序京东商城分类栅格布局的方法】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。