小程序如何實現側邊欄切換

這篇文章主要介紹了小程序如何實現側邊欄切換的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇小程序如何實現側邊欄切換文章都會有所收獲，下面我們一起來看看吧。

效果圖如下：

實現步驟：

sort.wxml

<!--主盒子-->
<view class="con">
 <!--左側欄-->
 <view class="nav_left">
   <block wx:for="{{cateItems}}" wx:key="*this">
     <!--當前項的id等于item項的id，那個就是當前狀態-->
     <!--用data-index記錄這個數據在數組的下標位置，使用data-id設置每個item的id值，供打開2級頁面使用-->
     <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>
 </view>
 <!--右側欄-->
 <view class="nav_right">
   <!--如果有數據，才遍歷項-->
   <view wx:if="{{cateItems[curIndex].ishaveChild}}">
     <block wx:for="{{cateItems[curIndex].children}}" wx:key="value">
       <view class="nav_right_items">
       <!--界面跳轉 -->
         <navigator url="../../detail/detail">
           <image src="{{item.image}}"></image>
           <text>{{item.name}}</text>
         </navigator>
       </view>
     </block>
   </view>
   <!--如果無數據，則顯示數據-->
   <view class="nodata_text" wx:else>該分類暫無數據</view>
 </view>
</view>

sort.wxss

page{  
  background: #f5f5f5;  
}  
/*總體主盒子*/  
.con {  
  position: relative;  
  width: 100%;  
  height: 100%;  
  background-color: #fff;  
  color: #939393;  
}
 /*左側欄主盒子*/  
.nav_left{  
  /*設置行內塊級元素（沒使用定位）*/  
  display: inline-block;  
  width: 25%;  
  height: 100%;  
  /*主盒子設置背景色為灰色*/  
  background: #f5f5f5;  
  text-align: center;  
}  
/*左側欄list的item*/  
.nav_left .nav_left_items{  
  /*每個高30px*/  
  height: 40px;  
  /*垂直居中*/  
  line-height: 40px;  
  /*再設上下padding增加高度，總高42px*/  
  padding: 6px 0;  
  /*只設下邊線*/  
  border-bottom: 1px solid #dedede;  
  /*文字14px*/  
  font-size: 14px; 
}  
/*左側欄list的item被選中時*/  
.nav_left .nav_left_items.active{  
  /*背景色變成白色*/  
  background: #fff;  
  color: #f0145a; 
}  
/*右側欄主盒子*/  
.nav_right{  
  /*右側盒子使用了絕對定位*/  
  position: absolute;  
  top: 0;  
  right: 0;  
  flex: 1;  
  /*寬度75%，高度占滿，并使用百分比布局*/  
  width: 75%;  
  height: 1000px;  
  padding: 10px;  
  box-sizing: border-box;  
  background: #fff;  
}  
/*右側欄list的item*/  
.nav_right .nav_right_items{  
  /*浮動向左*/  
  float: left;  
  /*每個item設置寬度是33.33%*/  
  width: 33.33%;  
  height: 94px;  
  text-align: center;  
}  
.nav_right .nav_right_items image{  
  /*被圖片設置寬高*/  
  width: 60px;  
  height: 50px;   
}  
.nav_right .nav_right_items text{  
  /*給text設成塊級元素*/  
  display: block;   
  font-size: 14px;  
  color: black;
  /*設置文字溢出部分為...*/  
  overflow: hidden;  
  white-space: nowrap;  
  text-overflow: ellipsis;  
} 
.nodata_text
{
  color:#000;
  font-size: 14px;  
  text-align: center;  
}

sort.js

Page({
  data: {
    cateItems: [
      {
        cate_id: 1,
        cate_name: "列表一",
        ishaveChild: true,
        children:
          [
            {
              child_id: 1,
              name: 'ssd',
              image: "../../images/1.jpg"
            },
            {
              child_id: 2,
              name: 'fff',
              image: "../../images/2.jpg"
            },
            {
              child_id: 3,
              name: 'ghf',
              image: "../../images/3.jpg"
            },
            {
              child_id: 4,
              name: 'gergr',
              image: "../../images/4.jpg"
            }
          ]
      },
      {
        cate_id: 2,
        cate_name: "列表二",
        ishaveChild: true,
        children:
          [
            {
              child_id: 1,
              name: 'eryt',
              image: "../../images/2.jpg"
            },
            {
              child_id: 2,
              name: '3dwag',
              image: "../../images/3.jpg"
            },
            {
              child_id: 3,
              name: 'hrtht',
              image: "../../images/2.jpg"
            },
            {
              child_id: 4,
              name: 'ydtjy',
              image: "../../images/6.jpg"
            },
            {
              child_id: 5,
              name: 'yjtdyt',
              image: "../../images/3.jpg"
            },
            {
              child_id: 6,
              name: 'aerf',
              image: "../../images/4.jpg"
            },
            {
              child_id: 7,
              name: 'gerg',
              image: "../../images/2.jpg"
            },
            {
              child_id: 8,
              name: 'jytj',
              image: "../../images/1.jpg"
            }
          ]
      },
      {
        cate_id: 3,
        cate_name: "列表三",
        ishaveChild: true,
        children:
          [
            {
              child_id: 1,
              name: 'jtytyj',
              image: "../../images/3.jpg"
            },
            {
              child_id: 2,
              name: 'tyjfyj',
              image: "../../images/6.jpg"
            },
            {
              child_id: 3,
              name: 'tuyfuk',
              image: "../../images/4.jpg"
            },
            {
              child_id: 4,
              name: 'seyu5trd',
              image: "../../images/3.jpg"
            }
          ]
      },
      {
        cate_id: 4,
        cate_name: "列表四",
        ishaveChild: false,
        children: []
      }
    ],
    curNav: 1,
    curIndex: 0
  },

  //事件處理函數  
  switchRightTab: function (e) {
    console.log(e)
    // 獲取item項的id，和數組的下標值  
    let id = e.target.dataset.id,
    index = parseInt(e.target.dataset.index);
    // 把點擊到的某一項，設為當前index  
    this.setData({
      curNav: id,
      curIndex: index
    })
  }
})

關于“小程序如何實現側邊欄切換”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“小程序如何實現側邊欄切換”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。