微信小程序实现tab点击切换

本文实例为大家分享了微信小程序无滑动效果的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
? ? }],
? },


? // 切换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 () {

? },

})

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现tab点击切换的详细内容...