首页 > 小程序教程 > 实现微信小程序京东商城分类栅格布局的方法

实现微信小程序京东商城分类栅格布局的方法

上一篇 下一篇
1、wxml页面样式文件代码如下:
/* 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;
}
2、js测试数据文件代码如下:
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
      })
    }

  }
})

3、wxml展示效果页面代码如下:
<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>

通过以上代码以后 可以达到京东如下效果,并不是全部效果,主要为了实现栅格布局效果哈。

模板简介:该模板名称为【实现微信小程序京东商城分类栅格布局的方法】,大小是,文档格式为.,推荐使用打开,作品中的图片,文字等数据均可修改,图片请在作品中选中图片替换即可,文字修改直接点击文字修改即可,您也可以新增或修改作品中的内容,该模板来自用户分享,如有侵权行为请联系网站客服处理。欢迎来懒人模板【小程序教程】栏目查找您需要的精美模板。

相关搜索
  • 下载密码 lanrenmb
  • 下载次数 29,619次
  • 使用软件
  • 文件格式
  • 文件大小
  • 上传时间 05-14
  • 作者 网友投稿
  • 肖像权 人物画像及字体仅供参考
栏目分类 更多 >
热门推荐 更多 >
html5 微信公众平台 微信模板 微信素材 单页式简历模板 微信图片 响应式 企业网站 微信文章 自适应
您可能会喜欢的其他模板