小程序侧边栏切换效果的制作步骤及代码是什么-群英

上一篇：JavaScript本地存储特性有哪些，怎么实现下一篇：用JS做列表循环滚动涉及哪些知识，具体怎样做

这篇文章主要讲解了“小程序侧边栏切换效果的制作步骤及代码是什么”，文中的讲解内容简单、清晰、详细，对大家学习或是工作可能会有一定的帮助，希望大家阅读完这篇文章能有所收获。下面就请大家跟着小编的思路一起来学习一下吧。

效果图如下：

实现步骤：

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
    })
  }
})