微信小程序flex布局(实现电商侧栏)

效果图如下：

1750086-80e483b9d419fe6b.gif

参照的是https://blog.csdn.net/u012927188/article/details/73650264这篇文章，但他用的并非是flex布局，今天我用flex布局实现他的效果。

Flex布局的概念
flex布局类似Android中的相对布局RelativeLayout，采用Flex布局的元素，称为Flex容器（flex container）。它的所有子元素自动成为容器成员，称为Flex项目（flex item）。
容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

image.png
关于flex布局详细资料可以参考http://www.runoob.com/w3cnote/flex-grammar.html

Flex布局的使用
常用的标签有：

  display: flex; //声明容器为flex布局
  flex-direction: row; //容器内元素的排列方向.row为沿水平轴排列,column为沿垂直轴排列
  justify-content: center; //容器内元素在水平轴上的排列方式,center为居中，默认值flex-start(左对齐)
  align-items: center; //容器内元素在垂直轴上的排列方式,center为居中，默认值stretch

接下来正式实现效果图的效果
wxml：

<view class="container">
  // 左侧
  <view class="nav_left">
    <block wx:for="{{level}}">
      <view class="nav_left_item {{current == item.cate_id ? 'active' : ''}}" 
            data-index='{{index}}' data-id='{{item.cate_id}}' bindtap='onClick'>{{item.cate_name}}</view>
    </block>
  </view>

  //右侧
  <view class="nav_right">
    <view class="nav_right_container" wx:if="{{level[index].ishaveChild}}">
      <block wx:for="{{level[index].children}}">
        <view class="nav_right_item">
          <image class='image' src="{{item.image}}"></image>
          <text class='text'>{{item.name}}</text>
        </view>
      </block>
    </view>
    <view wx:else>该类暂无数据</view> 
  </view>

</view>

wxss:

.container{
  width:100%;
  height:100%;
  display: flex;
  flex-direction: row;
  padding: 0 0 ; //为什么默认上下有200rpx的padding？？？望高人解答
  align-items: flex-start;
}

.nav_left{
  width : 25%;
  height: 100%;
  background: #f5f5f5;

}

.nav_left_item {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 42px;
  border-bottom: 1px solid #dedede;
  font-size: 14px;
}

.active {
  background: #00ff00;
}

.nav_right {
  width:75%;
}

.nav_right_container {
  width:100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.nav_right_item{
  width: 33.33%;
  height: 60px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10rpx 0;
}

.image {
  width: 50%;
  height: 50%;
}

.text {
  width: 100%;
  font-size: 14px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-align: center;
}

js:

Page({

  /**
   * 页面的初始数据
   */
  data: {
    // navLeft:["宝宝奶粉", "纸尿裤","辅食营养","母婴专区","护肤美体","营养保健","居家日用","进口美食","轻奢女装","秒杀特惠清仓","时尚箱包","专场大促","汽车用品","美容护肤","电器手机","生活家居","服饰鞋子","还有什么","没有了吧",]

    level:[
      {
        cate_id: 1,
        cate_name: "护肤",
        ishaveChild: true,
        children:
          [
            {
              child_id: 1,
              name: '洁面皂',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117972563.jpg"
            },
            {
              child_id: 2,
              name: '卸妆',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161207/148110444480.jpg"
            },
            {
              child_id: 3,
              name: '洁面乳',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117973270.jpg"
            },
            {
              child_id: 4,
              name: '面部祛角质',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161208/148117981591.jpg"
            }
          ]
      },
      {
        cate_id: 2,
        cate_name: "彩妆",
        ishaveChild: true,
        children:
          [
            {
              child_id: 1,
              name: '气垫bb',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381301.jpg"
            },
            {
              child_id: 2,
              name: '修容/高光',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161212/14815381411.jpg"
            },
            {
              child_id: 3,
              name: '遮瑕',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815181.jpg"
            },
            {
              child_id: 4,
              name: '腮红',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153815759.jpg"
            },
            {
              child_id: 5,
              name: '粉饼',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153816983.jpg"
            },
            {
              child_id: 6,
              name: '粉底',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153817721.jpg"
            },
            {
              child_id: 7,
              name: '蜜粉/散粉',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161212/148153819354.jpg"
            },
            {
              child_id: 8,
              name: '隔离霜',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161215/148179053369.jpg"
            }
          ]
      },
      {
        cate_id: 3,
        cate_name: "香水/香氛",
        ishaveChild: true,
        children:
          [
            {
              child_id: 1,
              name: '淡香水EDT',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815978910.jpg"
            },
            {
              child_id: 2,
              name: '浓香水EDP',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159789883.jpg"
            },
            {
              child_id: 3,
              name: '香体走珠',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161213/14815979307.jpg"
            },
            {
              child_id: 4,
              name: '古龙香水男士的最爱',
              image: "http://mz.djmall.xmisp.cn/files/logo/20161213/148159765589.jpg"
            }
          ]
      },
      {
        cate_id: 4,
        cate_name: "个人护理",
        ishaveChild: false,
        children: []
      }
    ],

    current : 1, //当前选中的cate_id
    index : 0 // 当前选中的index
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
  
  },

  onClick: function(e) {
      console.log(e)

      this.setData({
        current:e.target.dataset.id,
        index:e.target.dataset.index
      })
  }

})