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

上一篇：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
    })
  }
})

以上就是关于“小程序侧边栏切换效果的制作步骤及代码是什么”的相关知识，感谢各位的阅读，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注群英网络，小编每天都会为大家更新不同的知识。