微信小程序 tab点击切换（不滑动）
<!--pages/dingdan/dingdan.wxml--><view class="body"><view class="swiper-tab"><view wx:for="{{tabList}}" wx:key="index" catchtap="change" class="{{page==index?'selected-menu':'unselect-menu'}}" data-pageid="{{index}}">{{item.title}}({{item.num}})<hr class="{{page==index?'selected-line':'unselect-line'}}" /></view></view><view class="view-Content"><view wx:for="{{tabList}}" wx:key="index" class="{{page==index?'show tabCon':'hidden tabCon'}}"><view class="content"><text>暂无订单{{index}}</text></view></view></view></view>
/* 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}],},// 切换tabchange: function (event) {console.log('切换时会调用', event);var a = event.currentTarget.dataset.pageidthis.setData({page: a,})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {},/*** 生命周期函数--监听页面初次渲染完成*/onReady: function () {},/*** 生命周期函数--监听页面显示*/onShow: function () {},/*** 生命周期函数--监听页面隐藏*/onHide: function () {},/*** 生命周期函数--监听页面卸载*/onUnload: function () {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh: function () {},/*** 页面上拉触底事件的处理函数*/onReachBottom: function () {},/*** 用户点击右上角分享*/onShareAppMessage: function () {},})
