小程序（布局：左右栅栏布局）

（布局：左右栅栏布局）

写了个demo，抽取了一部分出来，觉得有必要记录一下，就贴下代码，有需要的同学可以直接复制用（可能想多了，哈哈，毕竟非常简单），需要注意点的是左边的选中状态的实现

class="columnitem {{item.id == currentSelectColumnID ? 'selcolumnitem' : ''}}"

因为数据是自己造的，写的比较随意，直接根据name取出对应栏的id，判断点击栏的id跟记录的id是否相等，相等则给他加个样式

效果图

图片发自简书App

1、布局内容

<!-- 容器视图 -->
<view class="bottomClassView">

  <!-- 左边 -->
  <scroll-view scroll-y="true" class="left-group">
    <view class="columnitem {{item.id == currentSelectColumnID ? 'selcolumnitem' : ''}}" wx:for="{{colunmitems}}" bindtap="changeitem" data-itemname="{{item.name}}" data-itemid="{{item.id}}" wx:key="{{index}}">{{item.name}}
    </view>
  </scroll-view>

  <!-- 右边 -->
  <scroll-view class="right-group" scroll-y="true">
    <view class="contentitem" wx:for="{{showContentDatas}}" wx:key="{{index}}">
      <image src=""></image>
      <view class="rightitemview">
        <view class="nameview">{{item.productname}}</view>
        <view class="labelview">
          <view class="labelvie-color">在途</view>
          <view class="labelvie-color">现有</view>
          <view class="labelvie-color">用完</view>
        </view>
      </view>
    </view>
  </scroll-view>
</view>

2、样式表

.bottomClassView {
  position: fixed;
  width: 100%;
  display: flex;
  bottom: 0rpx;
  top: 20rpx;
}

.left-group {
  width: 30%;
  margin-bottom: 0rpx;
  margin-top: 0rpx;
}

.left-group .columnitem {
  width: 100%;
  height: 80rpx;
  background-color: white;
  text-align: center;
  line-height: 80rpx;
  margin-bottom: 2rpx;
}
.left-group .selcolumnitem {
  background-color: gray;
  
}

.right-group {
  width: 70%;
  margin-bottom: 0rpx;
  margin-top: 0rpx;
}

.right-group .contentitem {
  width: 100%;
  height: 200rpx;
  display: flex;
  padding: 10rpx;
  align-items: center;
  background-color: white;
  margin-bottom: 2rpx;
}

.right-group .contentitem image {
  width: 150rpx;
  height: 150rpx;
  flex-basis: 150rpx;
  background-color: gray;
}

.right-group .contentitem .rightitemview {
  display: flex;
  flex-direction: column;
  margin: 20rpx;
  flex: 1;
}
.nameview{
  
}
.labelview {
  margin-top: 30rpx;
  display: flex;
  justify-content: space-around;
}
.labelview .labelvie-color{
  border-radius: 6rpx;
  color: white;
  background-color: gray;
  padding: 10rpx 15rpx;
}

3、本地数据

colunmitems: [{
      name: '全部',
      id: 1}, {
      name: '精油',
      id: 2 }, {
      name: '植物油',
      id: 3}, {
      name: '保健',
      id: 4 }, {
      name: '配件',
      id: 5 }, {
      name: '酱醋茶',
      id: 6 }, {
      name: '其他',
      id: 7 }],
    contentitemDatas: [{
      id: 1,
      name: '精油',
      data: [{
        productname: "茉莉精油"
      }, {
        productname: "玫瑰精油"
      }]
    }, {
      id: 2,
      name: '植物油',
      data: [{
        productname: "花生油"
      }, {
        productname: "菜籽油"
      }]
    }, {
      id: 3,
      name: '保健',
      data: [{
        productname: "枸杞"
      }, {
        productname: "保健药品"
      }, {
        productname: "药丸"
      }]
    }],
    showContentDatas: []

4、js相关代码

onLoad: function(options) {
    // 默认选择全部
    this.setDefaultdata();
  },
//设置默认数据
  setDefaultdata: function() {
    var myarray = [];
    for (var i in this.data.contentitemDatas) {
      var array = this.data.contentitemDatas[i].data;
      for (var j in array) {
        myarray.push(array[j]);
      }
    }
    this.setData({
      showContentDatas: myarray
    });
  }

//点击左边栏目，切换数据
changeitem: function(event) {
    var itemname = event.currentTarget.dataset.itemname;
    var itemid = event.currentTarget.dataset.itemid;
    this.setData({
      currentSelectColumnID: itemid
    })
    if (itemname == '全部') {
      this.setDefaultdata();
      return;
    }
    var myarray = [];
    for (var itemindex in this.data.contentitemDatas) {
      if (this.data.contentitemDatas[itemindex].name == itemname) {
        myarray = this.data.contentitemDatas[itemindex].data;
        break;
      }
    }
    this.setData({
      showContentDatas: myarray
    });
  }