微信小程序實現tab點擊切換
更新時間:2022年07月13日 14:37:47 作者:常安cc
這篇文章主要為大家詳細介紹了微信小程序實現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, ? ? }) ? }, ?? ? /** ? ?* 生命周期函數--監(jiān)聽頁面加載 ? ?*/ ? onLoad: function (options) { ? }, ? /** ? ?* 生命周期函數--監(jiān)聽頁面初次渲染完成 ? ?*/ ? onReady: function () { ? }, ? /** ? ?* 生命周期函數--監(jiān)聽頁面顯示 ? ?*/ ? onShow: function () { ? }, ? /** ? ?* 生命周期函數--監(jiān)聽頁面隱藏 ? ?*/ ? onHide: function () { ? }, ? /** ? ?* 生命周期函數--監(jiān)聽頁面卸載 ? ?*/ ? onUnload: function () { ? }, ? /** ? ?* 頁面相關事件處理函數--監(jiān)聽用戶下拉動作 ? ?*/ ? onPullDownRefresh: function () { ? }, ? /** ? ?* 頁面上拉觸底事件的處理函數 ? ?*/ ? onReachBottom: function () { ? }, ? /** ? ?* 用戶點擊右上角分享 ? ?*/ ? onShareAppMessage: function () { ? }, })
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
bootstrap動態(tài)調用select下拉框的實例代碼
今天小編就為大家分享一篇bootstrap動態(tài)調用select下拉框的實例代碼,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08如何在面試中手寫出javascript節(jié)流和防抖函數
這篇文章主要介紹了如何在面試中手寫出javascript節(jié)流和防抖函數,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-10-10Chrome插件開發(fā)系列一:彈窗終結者開發(fā)實戰(zhàn)
從這一節(jié)開始,我們將從零開始打造我們的chrome插件工具庫,第一節(jié)我們將講一下插件開發(fā)的基礎知識并構建一個簡單但卻很實用的插件,在構建之前,我們先簡單的了解一下插件以及插件開發(fā)的基礎知識2020-10-10