微信小程序左侧竖形滑动菜单（仿淘宝分类界面）

野性酷女 2023-06-03 11:57 14阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]  
1、category.js中data初始化的数据（模拟），如果是跟后台数据库挂钩，可以用wx.request请求返回相似的对象数组再绑定到cartItems中。

data: {
        
        cateItems:[
          {
        
            cate_id:1,
            cate_name:'洗护',
            children: [
              {
         
                child_id: 1, 
                name: '洁面皂', 
                image: "../../images/thumbnail/1.jpg" 
              }, 
              {
         
                child_id: 2, 
                name: '卸妆', 
                image: "../../images/thumbnail/2.jpg"  
              }
            ]
          },
          {
        
            cate_id:2,
            cate_name:'生鲜'
          },
          {
        
            cate_id:3,
            cate_name:'食品'
          },
          {
        
            cate_id: 4,
            cate_name: '女装'
          },
          {
        
            cate_id: 5,
            cate_name: '百货'
          },
          {
        
            cate_id: 6,
            cate_name: '母婴'
          },
          {
        
            cate_id: 7,
            cate_name: '手机'
          },
          {
        
            cate_id: 8,
            cate_name: '鞋靴'
          },
          {
        
            cate_id: 9,
            cate_name: '运动'
          },
          {
        
            cate_id: 10,
            cate_name: '美家'
          },
          {
        
            cate_id: 11,
            cate_name: '男装'
          },
          {
        
            cate_id: 12,
            cate_name: '水果'
          },
          {
        
            cate_id: 13,
            cate_name: '电子'
          }
        ],
        curNav:1,
        curIndex:0
      },
     
      switchRightTab:function(e){
        
        let id = e.target.dataset.id,index=e.target.dataset.index;
        this.setData({
        
          curNav:id,
          curIndex:index
        })
      },

<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">
        
        <view wx:if="{
         {cateItems[curIndex].children.length>0}}">
          <block wx:for="{
         {cateItems[curIndex].children}}" wx:key="{
         {index}}">
            <view class="nav_right_items">
            
              <navigator url="../../detail/detail">
                <image src="{
         {item.image}}"></image>
                <text>{
       {item.name}}</text>
              </navigator>
            </view>
          </block>
        </view>
        
        <view class="nocate" wx:else>
          <image src="../../images/without.png"></image>
          <text>该分类暂无数据</text>
        </view>
      </scroll-view>
    </view>

.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;  
    } 
     
    .nocate image{
        
      width:70rpx;
      height:70rpx;
    }
    .nocate text{
        
      font-size:28rpx;
      display:block;
      color:#BBB;
    }
    /*隐藏滚动条*/
    ::-webkit-scrollbar{
        
      width: 0;
      height: 0;
      color: transparent;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMDQzODU5_size_16_color_FFFFFF_t_70]: /images/20230601/5311159b973446bf8be317167a0b0377.png