欢迎来到懒人模板!我们专注移动互联网,所有模板永久免费下载!
  • 首 页
  • 当前位置:主页 > 小程序教程 >

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

    2018-05-14 09:51 来源/作者:懒人模板 分类:小程序教程  « »
    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>

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

    点击扫描效果预览免费下载免登陆网盘下载
    标签:
    * 懒人模板承诺:本站所有资源免费下载,无病毒,无弹窗,无干扰链接! 提点建议