微信小程序实现双层嵌套菜单栏_javascript技巧_

               item1                 item2                 item3                                       child_item1.1         child_item1.2                                  child_item1.1的页面                             child_item1.2的页面                                              child_item2.1         child_item2.2         child_item2.3                                  child_item2.1的页面                             child_item2.2的页面                             child_item2.3的页面                                               child_item3.1         child_item3.2         child_item3.3                                  child_item3.1的页面                             child_item3.2的页面                             child_item3.3的页面                        

page {   font-size: 3.5vw;   height: 100%;   width: 100%;   display: flex;   flex-direction: column; } swiper{   height: 100%;   width: 100%; }   .contain {   display: flex;   flex-direction: column;   flex: 1;   height: 0; }   .tabbar {   height: 5vw;   width: 100vw;   display: flex;   flex-direction: row;   justify-content: space-around;   border-bottom: 3px #dbdbdb solid;   padding-bottom: 2vw; }   .tabbar_item {   display: flex;   flex: 1;   flex-direction: column;   align-items: center; }   .on {   color: coral; }     .swiper-box {   display: flex;   flex-direction: column;   flex: 1;   height: 0;   width: 100%;   overflow-x: hidden;   overflow-y: scroll; }   .swiper1_top {   width: 100vw;   display: flex;   margin-left: 2vw;   flex-direction: row;   font-size: 4vw;   align-items: center;   background-color: white; }   .swiper1_top_item {   flex: 1;   display: flex;   justify-content: center;   align-items: center;   padding: 2.5vw 0; } .swiper1_contain {   width: 100vw;   height: 100%;   display: flex;   flex-direction: column;   align-items: center; } .swiper1_item {   margin-bottom: 3vw;   width: 94vw; } .dir_row {   display: flex;   flex-direction: row; }

Page({     /**    * 页面的初始数据    */   data: {     currentTab: 0,     swipeIndex: 0,     itemCurrent1: 0,     itemIndex1: 0,     itemCurrent2: 0,     itemIndex2: 0,     itemCurrent3: 0,     itemIndex3: 0,     flag1: false,     flag2: false,     flag3: true   },   /**     * 滑动切换tab     */   bindChange: function(e) {     console.log('debugbindcange')     var that = this;     that.setData({       swipeIndex: e.detail.current     });     },   swiperItemChange1: function(e) {     var that = this;     that.setData({       itemIndex1: e.detail.current     });   },   swiperItemChange2: function(e) {     var that = this;     that.setData({       itemIndex2: e.detail.current     });   },   swiperItemChange3: function(e) {     var that = this;     that.setData({       itemIndex3: e.detail.current     });   },   /**     * 点击tab切换     */   swichNav: function(e) {     var that = this;     if (this.data.swipeIndex === e.currentTarget.dataset.current) {       return false;     } else {       that.setData({         currentTab: e.currentTarget.dataset.current       })     }     },   itemSwich1: function(e) {     var that = this;     if (this.data.itemIndex1 === e.currentTarget.dataset.current1) {       return false;     } else {       that.setData({         itemIndex1: e.currentTarget.dataset.current1,         itemCurrent1: e.currentTarget.dataset.current1       })     }   },   itemSwich2: function(e) {     var that = this;     console.log(e)     if (this.data.itemIndex2 === e.currentTarget.dataset.current2) {       return false;     } else {       that.setData({         itemIndex2: e.currentTarget.dataset.current2,         itemCurrent2: e.currentTarget.dataset.current2       })     }   },   itemSwich3: function(e) {     var that = this;     if (this.data.itemIndex3 === e.currentTarget.dataset.current3) {       return false;     } else {       that.setData({         itemIndex3: e.currentTarget.dataset.current3,         itemCurrent3: e.currentTarget.dataset.current3       })     }   },     /**    * 滑动item绑定事件    */   swiperTrans: function(e) {     var that = this;     var dx = e.detail.dx          if (this.data.flag3 && (this.data.flag2) && (dx >= 50) && (dx < 100)) {       console.log('debug')       that.data.flag3 = false       this.setData({         currentTab: that.data.swipeIndex + 1,                })     }     if (this.data.flag3 && (this.data.flag1) && (dx <= -50) && (dx > -100)) {       that.data.flag3 = false       this.setData({         currentTab: that.data.swipeIndex - 1,                })     }        },     itemTouchLeftMove: function(e) {     this.data.flag1 = true;   },   itemTouchLeftEnd: function(e) {     this.data.flag1 = false;     this.data.flag3 = true;   },   itemTouchRightMove: function(e) {     this.data.flag2 = true;   },   itemTouchRightEnd: function(e) {     this.data.flag2 = false;     this.data.flag3 = true;   } })