微信小程序 三级分类（高仿淘宝页面分类）

**

三级分类（高仿淘宝页面分类）

**
初步的二级页面参考的这个文章的代码：https://blog.csdn.net/luowei85520/article/details/90510311
这个基础上改成的淘宝三级分类
界面：

1、WXML代码

<view class="container">
  <!-- 左边的  -->
  <scroll-view class='nav_left' scroll-y='true'>
  <!-- 一级 -->
    <block wx:for="{
   {cateItems}}" wx:key="{
   {index}}">
      <view class="nav_left_items {
   {curNav==item.cate_id?'active':''}}" bindtap="switchRightTab" data-index='{
   {index}}' data-id="{
   {item.cate_id}}">{
   {
   item.cate_name}}</view>
    </block>
  </scroll-view>
  <!-- 右边的 -->
  <scroll-view class="nav_right" scroll-y="true">
  <!-- 二级 -->
      <block wx:for="{
   {cateItems[curIndex].children}}" wx:key="{
   {index}}">
     <text>{
   {
   item.name}}</text>
    <!--三级-->
    <view class="{
   {topx}}">
      <block wx:for="{
   {item.son}}" wx:key="{
   {item.child_id}}">
        <view class="nav_right_items" data-id="{
   {item.son_id}}">
            <image src="{
   {item.image}}"></image>
            <text>{
   {
   item.name}}</text>
        </view>
      </block>
    </view>
   </block>
  </scroll-view>
</view>

2、WXSS代码

.container{
   
  position:fixed;
  width:100%;
  height:100%;
  background-color:#FFF;
}
.nav_left{
   
  width:25%;
  height:100%;
  background:#F2F2F2;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
}
.nav_left .nav_left_items{
   
  height:100rpx;
  line-height:100rpx;
  font-size:28rpx;
}
.nav_left .nav_left_items.active{
   
  position:relative;
  background:#FFF;
  color:#FF5000;
}
.nav_left .nav_left_items.active::before{
   
  display: inline-block;
  width:6rpx;
  height:60rpx;
  background:#FE5723;
  content:'';
  position:absolute;
  top:20rpx;
  left:0;
}
.nav_right{
   
  position:absolute;
  top:0;
  right:0;
  width:75%;
  height:100%;
}
 
.nav_right .nav_right_items{
   
  float: left;   
  width: 33.33%; 
  text-align: center;  
  padding:30rpx 0;
} 
.nav_right .nav_right_items image{
   
  width: 120rpx;  
  height: 120rpx; 
} 
.nav_right .nav_right_items text{
   
  display: block;  
  margin-top: 20rpx;  
  font-size: 28rpx;  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
} 
.nocate{
   
  padding:100rpx;
  text-align: center;