小程序实现侧边栏切换_javascript技巧_

                          {{item.cate_name}}                                                                          {{item.name}}                                    该分类暂无数据  

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

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