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

效果图如下：

实现步骤：

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

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

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• JS变量声明var、let、const分别是怎样的

  JavaScript中的变量是松散类型的,可以保存任何类型数据,变量只不过是一个名称,下面这篇文章主要给大家介绍了关于JavaScript变量声明的var、let、const的相关资料,需要的朋友可以参考下

• React路由传参方法有哪些？怎样实现？

  React路由传参方法有哪些？我们知道React中传参方式有很多，通过路由传参的方式也是必不可少的一种。因此，这篇文章就给大家分享一下React路由传参方法及实现，感兴趣的朋友就继续往下看吧。

• vue项目出现缩进报错的问题怎样解决

  idea编译器出现Vue缩进报错，怎么解决呢，很多朋友遇到这个问题都很棘手，不知该如何解决，今天小编给大家通过场景分析介绍解决方案，需要的朋友参考下吧

• JS对象创建方式有几种，优缺点是什么？

  JS对象创建方式有几种，优缺点是什么？在JS开发中，如果要输入姓名、性别、年龄等信息，使用值类型存储，则必须声明多个变量，如果你声明更多的变量，就会造成变量污染，别着急，下面是JS中几种对象创建方法的优缺点比较，希望能帮到对此有需要的你。

• Cocos项目中技能冷却效果怎样实现，过程是怎样

  这篇文章主要介绍了Cocos项目中技能冷却效果怎样实现，过程是怎样相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Cocos项目中技能冷却效果怎样实现，过程是怎样文章都会有所收获，下面我们一起来看看吧。