微信小程序?qū)崿F(xiàn)tab點擊切換

更新時間：2022年07月13日 14:37:47 作者：常安cc

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)tab點擊切換，不滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序無滑動效果的tab點擊切換的具體代碼，供大家參考，具體內(nèi)容如下

<!--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;
}

/* 內(nèi)容 */
.view-Content {
? flex: 1;
? overflow-y: auto;
? background-color: rgb(236, 236, 236);
}

.tabCon {
? height: 100%;
}


/* 展示隱藏 */
.show {
? display: block;
}

.hidden {
? display: none;
}

Page({

? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? page: 0, // page：當前頁--
? ? tabList: [{
? ? ? title: '菜單1',
? ? ? num: 0
? ? }, {
? ? ? title: '菜單2',
? ? ? num: 0
? ? }, {
? ? ? title: '菜單3',
? ? ? num: 0
? ? }],
? },


? // 切換tab
? change: function (event) {
? ? console.log('切換時會調(diào)用', event);
? ? var a = event.currentTarget.dataset.pageid
? ? this.setData({
? ? ? page: a,
? ? })
? },
??

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {

? },

? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {

? },

? /**
? ?* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {

? },

? /**
? ?* 頁面上拉觸底事件的處理函數(shù)
? ?*/
? onReachBottom: function () {

? },

? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {

? },

})

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: