小程序实现侧边栏切换

本文实例为大家分享了小程序实现侧边栏切换的具体代码，供大家参考，具体内容如下
效果图如下：

实现步骤：
sort.wxml

1. <!--主盒子-->
2. <view class="con">
3. <!--左侧栏-->
4. <view class="nav_left">
5. <block wx:for="{{cateItems}}" wx:key="*this">
6.   <!--当前项的id等于item项的id，那个就是当前状态-->
7.   <!--用data-index记录这个数据在数组的下标位置，使用data-id设置每个item的id值，供打开2级页面使用-->
8.   <view class="nav_left_items {{curNav == item.cate_id ? 'active' : ''}}" bindtap="switchRightTab" data-index="{{index}}" data-id="{{item.cate_id}}">{{item.cate_name}}</view>
9. </block>
10. </view>
11. <!--右侧栏-->
12. <view class="nav_right">
13. <!--如果有数据，才遍历项-->
14. <view wx:if="{{cateItems[curIndex].ishaveChild}}">
15.   <block wx:for="{{cateItems[curIndex].children}}" wx:key="value">
16.    <view class="nav_right_items">
17.    <!--界面跳转 -->
18.     <navigator url="../../detail/detail">
19.      <image src="{{item.image}}"></image>
20.      <text>{{item.name}}</text>
21.     </navigator>
22.    </view>
23.   </block>
24. </view>
25. <!--如果无数据，则显示数据-->
26. <view class="nodata_text" wx:else>该分类暂无数据</view>
27. </view>
28. </view>

复制代码

sort.wxss

1. page{
2. background: #f5f5f5;
3. }
4. /*总体主盒子*/
5. con {
6. position: relative;
7. width: 100%;
8. height: 100%;
9. background-color: #fff;
10. color: #939393;
11. }
12. /*左侧栏主盒子*/
13. .nav_left{
14. /*设置行内块级元素（没使用定位）*/
15. display: inline-block;
16. width: 25%;
17. height: 100%;
18. /*主盒子设置背景色为灰色*/
19. background: #f5f5f5;
20. text-align: center;
21. }
22. /*左侧栏list的item*/
23. .nav_left .nav_left_items{
24. /*每个高30px*/
25. height: 40px;
26. /*垂直居中*/
27. line-height: 40px;
28. /*再设上下padding增加高度，总高42px*/
29. padding: 6px 0;
30. /*只设下边线*/
31. border-bottom: 1px solid #dedede;
32. /*文字14px*/
33. font-size: 14px;
34. }
35. /*左侧栏list的item被选中时*/
36. .nav_left .nav_left_items.active{
37. /*背景色变成白色*/
38. background: #fff;
39. color: #f0145a;
40. }
41. /*右侧栏主盒子*/
42. .nav_right{
43. /*右侧盒子使用了绝对定位*/
44. position: absolute;
45. top: 0;
46. right: 0;
47. flex: 1;
48. /*宽度75%，高度占满，并使用百分比布局*/
49. width: 75%;
50. height: 1000px;
51. padding: 10px;
52. box-sizing: border-box;
53. background: #fff;
54. }
55. /*右侧栏list的item*/
56. .nav_right .nav_right_items{
57. /*浮动向左*/
58. float: left;
59. /*每个item设置宽度是33.33%*/
60. width: 33.33%;
61. height: 94px;
62. text-align: center;
63. }
64. .nav_right .nav_right_items image{
65. /*被图片设置宽高*/
66. width: 60px;
67. height: 50px;
68. }
69. .nav_right .nav_right_items text{
70. /*给text设成块级元素*/
71. display: block;
72. font-size: 14px;
73. color: black;
74. /*设置文字溢出部分为...*/
75. overflow: hidden;
76. white-space: nowrap;
77. text-overflow: ellipsis;
78. }
79. .nodata_text
80. {
81. color:#000;
82. font-size: 14px;
83. text-align: center;
84. }

复制代码

sort.js

1. Page({
2. data: {
3.   cateItems: [
4.    {
5.     cate_id: 1,
6.     cate_name: "列表一",
7.     ishaveChild: true,
8.     children:
9.      [
10.       {
11.        child_id: 1,
12.        name: 'ssd',
13.        image: "../../images/1.jpg"
14.       },
15.       {
16.        child_id: 2,
17.        name: 'fff',
18.        image: "../../images/2.jpg"
19.       },
20.       {
21.        child_id: 3,
22.        name: 'ghf',
23.        image: "../../images/3.jpg"
24.       },
25.       {
26.        child_id: 4,
27.        name: 'gergr',
28.        image: "../../images/4.jpg"
29.       }
30.      ]
31.    },
32.    {
33.     cate_id: 2,
34.     cate_name: "列表二",
35.     ishaveChild: true,
36.     children:
37.      [
38.       {
39.        child_id: 1,
40.        name: 'eryt',
41.        image: "../../images/2.jpg"
42.       },
43.       {
44.        child_id: 2,
45.        name: '3dwag',
46.        image: "../../images/3.jpg"
47.       },
48.       {
49.        child_id: 3,
50.        name: 'hrtht',
51.        image: "../../images/2.jpg"
52.       },
53.       {
54.        child_id: 4,
55.        name: 'ydtjy',
56.        image: "../../images/6.jpg"
57.       },
58.       {
59.        child_id: 5,
60.        name: 'yjtdyt',
61.        image: "../../images/3.jpg"
62.       },
63.       {
64.        child_id: 6,
65.        name: 'aerf',
66.        image: "../../images/4.jpg"
67.       },
68.       {
69.        child_id: 7,
70.        name: 'gerg',
71.        image: "../../images/2.jpg"
72.       },
73.       {
74.        child_id: 8,
75.        name: 'jytj',
76.        image: "../../images/1.jpg"
77.       }
78.      ]
79.    },
80.    {
81.     cate_id: 3,
82.     cate_name: "列表三",
83.     ishaveChild: true,
84.     children:
85.      [
86.       {
87.        child_id: 1,
88.        name: 'jtytyj',
89.        image: "../../images/3.jpg"
90.       },
91.       {
92.        child_id: 2,
93.        name: 'tyjfyj',
94.        image: "../../images/6.jpg"
95.       },
96.       {
97.        child_id: 3,
98.        name: 'tuyfuk',
99.        image: "../../images/4.jpg"
100.       },
101.       {
102.        child_id: 4,
103.        name: 'seyu5trd',
104.        image: "../../images/3.jpg"
105.       }
106.      ]
107.    },
108.    {
109.     cate_id: 4,
110.     cate_name: "列表四",
111.     ishaveChild: false,
112.     children: []
113.    }
114.   ],
115.   curNav: 1,
116.   curIndex: 0
117. },
119. //事件处理函数
120. switchRightTab: function (e) {
121.   console.log(e)
122.   // 获取item项的id，和数组的下标值
123.   let id = e.target.dataset.id,
124.   index = parseInt(e.target.dataset.index);
125.   // 把点击到的某一项，设为当前index
126.   this.setData({
127.    curNav: id,
128.    curIndex: index
129.   })
130. }
131. })

复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持中国红客联盟。