小程序笔记 ------------- tree

小程序的分类布局，左树和右侧的类别

wxml布局

 <view class='typeContent'>
    <scroll-view scroll-y class='oneTypeBox'>
      <view  class='{{oneLevelIndex == index ? " current":""}}' wx:for="{{ret}}" wx:key="index" data-id='{{item.pid}}' data-index="{{index}}" bindtap='onOneLevel'>
        <text>{{item.name}}</text>
      </view>
    </scroll-view>
    <view class='rightTwoTypeBox'>
      <!-- <scroll-view scroll-y class='twoTypeScroll' scroll-into-view="{{ toView }}" bindscroll="handleBindScroll">
        <view class='twoTypeBox contlist'  wx:for="{{oneLevelList}}" wx:key="index" id="{{'p' + item.id }}" > 
          <view class='threeTypeBox' wx:if="{{item.children.length > 0}}">
            <view wx:for="{{item.children}}"  wx:key="childIndex" wx:for-item="childItem" wx:for-index="childIndex" data-index="{{index}}" data-goodsId="{{childItem.id}}" bindtap='onType'>
              <image src='{{childItem.imgUrl}}'></image>
              <view>{{childItem.name}}</view>
            </view>
          </view>
          <view wx:else class='no_classity'>暂无分类</view>
        </view>
      </scroll-view> -->
      
      <scroll-view scroll-y class='twoTypeScroll'>
        <view class='twoTypeBox contlist' > 
          <view class='threeTypeBox' wx:if="{{childList.length > 0}}">
            <view wx:for="{{childList}}"  wx:key="childIndex" wx:for-item="childItem" wx:for-index="childIndex" data-pageNum='{{childItem.jdPageNum}}' data-isJd='{{childItem.isJd}}' data-index="{{index}}" data-goodsId="{{childItem.id}}" bindtap='onType'>
              <image src='{{childItem.imgUrl}}'></image>
              <view>{{childItem.name}}</view>
            </view>
          </view>
          <view wx:else class='no_classity'>暂无分类</view>
        </view>
      </scroll-view>

    </view>
  </view> 

wxcss布局

page{
  width: 100%;
  height: 100%;
}
.type_content{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.type_content .searchBox {
  height: 80rpx;
  background-color: rgb(249, 250, 250);
  display: flex;
  align-items: center;
  justify-content: center;
}

.searchBox > navigator {
  height: 50rpx;
  width: 80%;
    background-color: #eee;
    border-radius: 28rpx;
  text-align: center;
}
.searchBox> navigator > text:nth-of-type(1){
  color: #999999;
  font-size: 25rpx;
  margin-right: 8rpx;
}
.searchBox> navigator > text:nth-of-type(2){
  font-size: 25rpx;
    color: #333333;
}
.type_content .typeContent {
  display: flex;
  flex: 1;
}
.type_content .typeContent .oneTypeBox {
  height: 100%;
  width: 170rpx;
  background-color: #f5f5f5;
  flex-shrink: 0;
}
.type_content .typeContent .oneTypeBox  view {
  height: 102rpx;
  display: flex;
  align-items: center;
  padding-left: 7rpx;
}
.type_content .typeContent .oneTypeBox  view  text {
  font-size: 28rpx;
    color: #1b1b1b;
  text-align: center;
  width: 100%;
  border-left: 5rpx solid #f5f5f5;
}
.type_content .typeContent .oneTypeBox  view.current  {
    background-color: #FFF;
}
.type_content .typeContent .oneTypeBox  view.current  text {
    color: #ea0303;
  border-left: 5rpx solid #ea0303;
}
.type_content .typeContent .rightTwoTypeBox {
    width: calc(100% - 170rpx);
  /* flex: 1 */
}
.type_content .typeContent .rightTwoTypeBox .searchTypeBox {
    
    background-color: #f5f5f5;
  display: flex;
}
.type_content .typeContent .rightTwoTypeBox .searchTypeBox > view {
  flex: 1;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.type_content .typeContent .rightTwoTypeBox .searchTypeBox > view > text:nth-child(1){
    color: #b4b4b4;
  font-size: 38rpx;
  margin-right: 10rpx;
}
.type_content .typeContent .rightTwoTypeBox .searchTypeBox > view > text:nth-child(2) {
    color: #272727;
  font-size: 26rpx;
}
.type_content .typeContent .rightTwoTypeBox .searchTypeBox > view:nth-child(1) > text:nth-child(1) {
  font-size: 44rpx;
}
.type_content .typeContent .rightTwoTypeBox .searchTypeBox > view.current > text {
    color: #ea0303;
}
.type_content .typeContent .rightTwoTypeBox .twoTypeScroll {
    background-color: #FFF;
  height: calc(100vh - 88rpx);
}
.type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox{
  padding: 38rpx 30rpx 0rpx 30rpx;
  border-top: 1px solid #dcdcdc;

}
.type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox:nth-child(1){
  border-top: 0;
}
.type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .twoTypeName {
  font-size: 30rpx;
    color: #1b1b1b;
  font-weight: bold;
}
.type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .threeTypeBox {
  margin-top: 50rpx;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
  padding: 0 19rpx;
}
.type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .threeTypeBox >view {
  /*  136rpx; */
  width: 33%;
  text-align: center;
}
.type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .threeTypeBox >view > image{
  /*  100%; */
  width: 136rpx;
  height: 136rpx;
}
.type_content .typeContent .rightTwoTypeBox .twoTypeScroll .twoTypeBox .threeTypeBox >view > view {
  height: 85rpx;
  text-align: center;
  font-size: 26rpx;
    color: #1b1b1b;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.no_classity{
  width:100%;
  text-align:center;
  margin:0px auto 40rpx;
}

js文件的左侧选项的单击事件

onOneLevel(e) {
    console.log(e);
    let { id, index } = e.currentTarget.dataset;
    console.log(id, index)
    this.setData({
      toView: id,
      oneLevelIndex:index,
      childList: this.data.oneLevelList[index].children
    });
  },