微信小程序三级联动，三列形式

系统管理员 2022-12-18 02:55 203阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center]  
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.value?'active':''}}" bindtap="switchRightTab" data-index='{ {index}}' data-id="{ {item.value}}">{ { item.label}}</view>
        </block>
      </scroll-view>
      <scroll-view class="nav_right" scroll-y="true">
        
        <view wx:if="{ {cateItems[curIndex].children.length>0}}">
          <block wx:for="{ {cateItems[curIndex].children}}" wx:key="{ {index}}">
            <view class="nav_right_items { {curNav2==item.value?'active':''}}" bindtap="handletwo" data-indextwo='{ {index}}' data-idtwo="{ {item.value}}">
            
                <text>{ { item.label}}</text>
            </view>
          </block>
        </view>
      </scroll-view>
      <scroll-view class="nav_right_two" scroll-y="true" wx:if="{ {cateItems[curIndex].children[curIndex2].children.length>0}}">
             <block wx:for="{ {cateItems[curIndex].children[curIndex2].children}}" wx:key="{ {index}}">
                <view class="nav_right_items"><text>{ { item.label}}</text></view>
             </block>
      </scroll-view>
    </view>

js:（其中的数据就不在这里展示，感兴趣可以去下载https://github.com/myyezi/myapi/blob/master/shuju.js）

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;
        left:25%;
        width:35%;
        height:100%;
        background-color: #e0e0e0;
      }
       
      .nav_right .nav_right_items{   
        height: 100rpx;
        line-height: 100rpx;
        font-size: 28rpx;
        text-align: center; 
      } 
      .nav_right .nav_right_items image{ 
        width: 120rpx;  
        height: 120rpx; 
      } 
      .nav_right .nav_right_items text{ 
        display: block;
        font-size: 28rpx;  
        overflow: hidden;  
        white-space: nowrap;  
        text-overflow: ellipsis;  
      } 
      .nocate{ 
        padding:100rpx;
        text-align: center;  
      } 
       
      .nocate image{ 
        width:70rpx;
        height:70rpx;
      }
      .nocate text{ 
        font-size:28rpx;
        display:block;
        color:#BBB;
      }
      /*隐藏滚动条*/
      ::-webkit-scrollbar{ 
        width: 0;
        height: 0;
        color: transparent;
      }
      .nav_right_two{ 
        position: absolute;
        top: 0;
        right: 0;
        height: 100%;
        background-color: #c2c0c0;
        width: 40%;
      }
      .nav_right_two .nav_right_items{ 
        height: 100rpx;
        line-height: 100rpx;
        font-size: 28rpx;
        text-align: center;
      }
      .nav_right_two .nav_right_items text { 
        display: block;
        font-size: 28rpx;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .nav_right .nav_right_items.active{ 
        position: relative;
        background: #FFF;
        color: #FF5000;
        
      }
      .nav_right .nav_right_items.active::before{ 
        display: inline-block;
        width:6rpx;
        height:60rpx;
        background:#FE5723;
        content:'';
        position:absolute;
        top:20rpx;
        left:0;
      }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NDMyOTk2_size_16_color_FFFFFF_t_70_pic_center]: /images/20221122/82bd4277431040d0a671d4fea2cb1bbf.png