微信小程序实现tab点击切换_javascript技巧_

        {{item.title}}({{item.num}})       
                                暂无订单{{index}}               

/* pages/dingdan/dingdan.wxss */ page {   width: 100%;   height: 100%;   overflow: hidden;   /* background: pink; */ } .body {   height: 100%;   /* background: hotpink; */   display: flex;   flex-direction: column; } /* tab栏 */ .swiper-tab {   width: 100%;   height: 80rpx;   text-align: center;   display: flex;   justify-content: space-between;   background: white; } .selected-menu {   display: flex;   flex-direction: column;   align-items: center;   color: #ff5050;   background: #fff;   font-size: 32rpx;   font-weight: bold;   font-family: PingFang SC;   font-weight: 400;   width: 33%;   height: 60rpx;   line-height: 60rpx;   opacity: 1;   /* border-bottom: 2px solid #ff5050; */   position: relative; } .unselect-menu {   display: flex;   flex-direction: column;   align-items: center;   font-size: 16px;   font-family: PingFang SC;   font-weight: 400;   color: #4f4f50;   width: 33%;   height: 60rpx;   line-height: 60rpx;   background: #fff;   opacity: 1;   position: relative;   /* border-radius: 34rpx; */ } .selected-line {   background: #ff5050;   height: 4rpx;   width: 90rpx;   position: absolute;   /* margin-top: 10rpx; */   bottom: -18rpx;   width: 60rpx; } /* 内容 */ .view-Content {   flex: 1;   overflow-y: auto;   background-color: rgb(236, 236, 236); } .tabCon {   height: 100%; } /* 展示隐藏 */ .show {   display: block; } .hidden {   display: none; }

Page({   /**    * 页面的初始数据    */   data: {     page: 0, // page：当前页--     tabList: [{       title: '菜单1',       num: 0     }, {       title: '菜单2',       num: 0     }, {       title: '菜单3',       num: 0     }],   },   // 切换tab   change: function (event) {     console.log('切换时会调用', event);     var a = event.currentTarget.dataset.pageid     this.setData({       page: a,     })   },      /**    * 生命周期函数--监听页面加载    */   onLoad: function (options) {   },   /**    * 生命周期函数--监听页面初次渲染完成    */   onReady: function () {   },   /**    * 生命周期函数--监听页面显示    */   onShow: function () {   },   /**    * 生命周期函数--监听页面隐藏    */   onHide: function () {   },   /**    * 生命周期函数--监听页面卸载    */   onUnload: function () {   },   /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh: function () {   },   /**    * 页面上拉触底事件的处理函数    */   onReachBottom: function () {   },   /**    * 用户点击右上角分享    */   onShareAppMessage: function () {   }, })