微信小程序?qū)崿F(xiàn)tab點擊切換
更新時間:2022年07月13日 14:37:47 作者:常安cc
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)tab點擊切換,不滑動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序無滑動效果的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:當(dāng)前頁-- ? ? 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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap動態(tài)調(diào)用select下拉框的實例代碼
今天小編就為大家分享一篇bootstrap動態(tài)調(diào)用select下拉框的實例代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08關(guān)于layui flow loading占位圖的實現(xiàn)方法
今天小編就為大家分享一篇關(guān)于layui flow loading占位圖的實現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09Echats圖表大屏自適應(yīng)的實現(xiàn)方法
很多時候我們需要用圖表來制作我們統(tǒng)計的數(shù)據(jù)直觀的分析,所以我們可以用Echarts來制作圖表,這篇文章主要給大家介紹了關(guān)于Echats圖表大屏自適應(yīng)的實現(xiàn)方法,需要的朋友可以參考下2021-10-10如何在面試中手寫出javascript節(jié)流和防抖函數(shù)
這篇文章主要介紹了如何在面試中手寫出javascript節(jié)流和防抖函數(shù),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10Chrome插件開發(fā)系列一:彈窗終結(jié)者開發(fā)實戰(zhàn)
從這一節(jié)開始,我們將從零開始打造我們的chrome插件工具庫,第一節(jié)我們將講一下插件開發(fā)的基礎(chǔ)知識并構(gòu)建一個簡單但卻很實用的插件,在構(gòu)建之前,我們先簡單的了解一下插件以及插件開發(fā)的基礎(chǔ)知識2020-10-10