小程序二级分类

<view class="asii"  wx:if="{{isdiqi}}">
  <view class="main">
    <view class="categroy-left">
      <!-- 当前项的id等于item项的id或者当前的下标等于item的下标时，那个就是当前状态- -->
      <view wx:for="{{category}}" wx:key="index" data-id="{{item.id}}" data-index="{{index}}" bindtap="switchTab" class="cate-list {{curIndex === index?'active':''}}">{{item.name}}</view>
    </view>
    <scroll-view class="categroy-right" scroll-y="{{}}" scroll-into-view="{{toView}}" scroll-with-animation="true">
      <view wx:if="{{category[curIndex].isChild}}">
        <block wx:for="{{category[curIndex].children}}" wx:for-index wx:key="idx">
          <view id="{{item.id}}" class="cate-box">
            <view class="cate-title">
              <text>{{item.name}}</text>
            </view>
          </view>
        </block>
      </view>
      <!-- 若无数据，则显示暂无数据 -->
      <view class='nodata' wx:else>该分类暂无数据</view>
    </scroll-view>

  </view>

css

.main {
  width: 100%;
  height: 520rpx;
  background-color: #fff;
}

.sss {
  background: rgba(0, 0, 0, 1);
  opacity: 0.4;
  height: 100%;
  
}

.asii {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 70rpx;
}

.categroy-left {
  float: left;
  width: 150rpx;
  height: 100%;
  overflow-y: auto;
  border-right: 1px solid #ddd;
  box-sizing: border-box;
}

.categroy-left .cate-list {
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  border-left: 3px solid #fff;
}

.categroy-left .cate-list.active {
  color: #ab956d;
  border-color: #ab956d;
}

.categroy-right {
  float: right;
  width: 600rpx;
  height: 100%;
}

.cate-box {
  height: 100%;
  padding: 40rpx;
  box-sizing: border-box;
}

.cate-title {
  position: relative;
  height: 30rpx;
  line-height: 30rpx;
  padding: 30rpx 0 55rpx;
  text-align: center;
  color: #ab956d;
  font-size: 28rpx;
}

.cate-title::before {
  position: absolute;
  left: 130rpx;
  top: 43rpx;
  content: '';
  width: 70rpx;
  height: 4rpx;
  background: #ab956d;
}

.cate-title::after {
  position: absolute;
  right: 130rpx;
  top: 43rpx;
  content: '';
  width: 70rpx;
  height: 4rpx;
  background: #ab956d;
}

.nodata {
  font-size: 14px;
  text-align: center;
  color: #ab956d;
  margin-top: 100px;
}

js

// pages/xiangan_public/publiliat/publiliat.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    ku: {
      l: '1',
      w: '2'
    },
    category: [{
        id: 'guowei',
        name: '果味',
        isChild: true,
        children: [{
          child_id: 1,
          name: "果味"
        }]
      },
      {
        id: 'shucai',
        name: '蔬菜',
        isChild: true,
        children: [{
          child_id: 1,
          name: "蔬菜"
        }]
      },
      {
        id: 'chaohuo',
        name: '炒货',
        isChild: true,
        children: [{
          child_id: 1,
          name: "炒货"
        }]
      },
      {
        id: 'dianxin',
        name: '点心',
        isChild: true,
        children: [{
          child_id: 1,
          name: "点心"
        }]
      },
      {
        id: 'ganguo',
        name: '干果',
        isChild: false,
        children: []
      },
      {
        id: 'clothes',
        name: '衣服',
        isChild: false,
        children: []
      },
      {
        id: 'bag',
        name: '包包',
        isChild: false,
        children: []
      },
      {
        id: 'woman',
        name: '女鞋',
        isChild: false,
        children: []
      },
      {
        id: 'mansport',
        name: '男鞋',
        isChild: false,
        children: []
      },
      {
        id: 'sports',
        name: '运动鞋',
        isChild: false,
        children: []
      },
      {
        id: 'hzp',
        name: '化妆品',
        isChild: false,
        children: []
      },
      {
        id: 'life',
        name: '日常用品',
        isChild: false,
        children: []
      },
      {
        id: 'computer',
        name: '电脑',
        isChild: false,
        children: []
      },
      {
        id: 'phone',
        name: '手机',
        isChild: false,
        children: []
      }
    ],
    curIndex: 0,
    toView: 'guowei',
    isdiqi: false
  },

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

  },
  switchTab(e) {
    //将获取到的item的id和数组的下表值设为当前的id和下标
    this.setData({
      toView: e.target.dataset.id,
      curIndex: e.target.dataset.index
    })
  },
  preventTouchMove: function(e) {
    console.log(e)
    if (e.timeStamp == e.timeStamp) {
      this.setData({
        isdiqi: false
      })
    }
  },
  asdiji() {
    this.setData({
      isdiqi: !this.data.isdiqi
    })
  },
  diqudainji() {
    this.setData({
      isdiqi: !this.data.isdiqi
    })
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})