小程序tab实现页面切换_javascript技巧_

                待接收(0)         
                            处理中(1)         
                           已完成(1)         
                               {{currentIndex}}                             {{currentIndex}}                             {{currentIndex}}       

page{   width: 100%;   height: 100%; } .container {   height: 100%;   min-height: 100%;   display: flex;   flex-direction: column;   box-sizing: border-box; }   .title {   width: 100%;   height: 88rpx;   background: white;   display: flex;   align-items: center;   justify-content: space-around; }   .titleSel {   width: 33%;   color: #5f6fee;   font-size: 32rpx;   display: flex;   flex-direction: column;   align-items: center; }   .titleUnsel {   color: #858fab;   font-size: #858fab; }   .headerLineSel {   background: #5f6fee;   height: 6rpx;   width: 40rpx;   position: relative;   margin-top: 10rpx; }   .headerLineUnsel {   background: #fff;   height: 6rpx;   width: 40rpx;   position: relative;   margin-top: 10rpx; }     .colors{   width: 100%;   height: 100%; }   .colors1{   width: 100%;   height: 100%;   background-color: royalblue; } .colors2{   width: 100%;   height: 100%;   background-color: salmon; } .colors3{   width: 100%;   height: 100%;   background-color: seagreen; }

data: {     currentIndex: 0,       },     //用户点击tab时调用   titleClick: function (e) {     let currentPageIndex =       this.setData({         //拿到当前索引并动态改变         currentIndex: e.currentTarget.dataset.idx       })         console.log(e.currentTarget.dataset.idx)   },