微信小程序?qū)崿F(xiàn)頂部普通選項卡效果(非swiper)
更新時間：2020年06月19日 15:34:47 作者：紙上得來終覺淺-絕知此事要躬行
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)頂部普通選項卡效果，非swiper，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
背景：前段時間寫了一個搶紅包小程序，里面涉及到了頂部選項卡，把它抽了出來。
效果圖：
下面直接上代碼:
wxml:
<view class="navbar">
<text wx:for="{{navbar}}" data-index="{{index}}"
class="item {{currentIndex==index?'active':''}}"
bindtap="navbarTab" wx:key="unique">{{item}}</text>
</view>
<view hidden="{{currentIndex!==0}}">
</view>
<view hidden="{{currentIndex!==1}}">
</view>
wxss:
.navbar{
display: flex;
width: 100%;
flex-direction: row;
line-height: 80rpx;
position: fixed;
top: 0;
}
.navbar .item{
flex: auto;
font-size: 30rpx;
text-align: center;
background: #fff;
font-weight: bold;
}
.navbar .item.active{
color: #36DB2C;
position: relative;
}
.navbar .item.active::after{
content: "";
display: block;
position: absolute;
height: 4rpx;
bottom: 0;
left: 0;
right: 0;
background: #36DB2C;
}
js:
data: {
navbar: ["我發(fā)出的", "我收到的"],
currentIndex: 0,//tabbar索引
},
navbarTab: function (e) {
this.setData({
currentIndex: e.currentTarget.dataset.index
});
},
以上是實現(xiàn)過程基本代碼，省去了中間內(nèi)容的代碼。頂部個數(shù)是循環(huán)出來的，可以根據(jù)自己的實際需求設置。
為大家推薦現(xiàn)在關注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
當頁面載入和關閉時會出現(xiàn)一些提示信息的代碼。方便提醒用戶，但不建議多用，讓人感到反感。2008-10-10
JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞)
這篇文章主要介紹了JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞),需要的朋友可以參考下2023-05-05
這篇文章介紹了javascript獲取選中的文本的方法代碼，有需要的朋友可以參考一下2013-10-10
今天小編就為大家分享一篇在Layui中實現(xiàn)開關按鈕的效果實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)前端倒計時效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家詳細介紹了JavaScript快速實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要分享了js獲取標簽元素data-*屬性值的4種方法，標簽上有兩個屬性??data-id????和???data-user-name??,?需要通過js去獲取，下面文章具體介紹需要的小伙伴可以參考一下2022-06-06
在ES5與ES6環(huán)境下處理函數(shù)默認參數(shù)的實現(xiàn)方法
本文給大家介紹在ES5與ES6環(huán)境下處理函數(shù)默認參數(shù)的實現(xiàn)方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值，感興趣的朋友跟隨腳本之家小編一起學習吧2018-05-05
這篇文章主要給大家介紹了關于JavaScript中scrollTo()無效問題處理辦法,scrollTo()方法將文檔滾動到指定的坐標,如需使 scrollTo()方法起作用,文檔必須大于屏幕,并且滾動條必須可見,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)抖音播放效果的實例代碼,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-04-04