微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果(非swiper)
更新時(shí)間：2020年06月19日 15:34:47 作者：紙上得來終覺淺-絕知此事要躬行
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)頂部普通選項(xiàng)卡效果，非swiper，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
背景：前段時(shí)間寫了一個(gè)搶紅包小程序，里面涉及到了頂部選項(xiàng)卡，把它抽了出來。
效果圖：
下面直接上代碼:
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
});
},
以上是實(shí)現(xiàn)過程基本代碼，省去了中間內(nèi)容的代碼。頂部個(gè)數(shù)是循環(huán)出來的，可以根據(jù)自己的實(shí)際需求設(shè)置。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript網(wǎng)頁關(guān)閉時(shí)提醒效果腳本
當(dāng)頁面載入和關(guān)閉時(shí)會(huì)出現(xiàn)一些提示信息的代碼。方便提醒用戶，但不建議多用，讓人感到反感。2008-10-10
JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞)
這篇文章主要介紹了JS判斷傳入函數(shù)的參數(shù)是否為空(函數(shù)參數(shù)是否傳遞),需要的朋友可以參考下2023-05-05
這篇文章介紹了javascript獲取選中的文本的方法代碼，有需要的朋友可以參考一下2013-10-10
在Layui中實(shí)現(xiàn)開關(guān)按鈕的效果實(shí)例
今天小編就為大家分享一篇在Layui中實(shí)現(xiàn)開關(guān)按鈕的效果實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)前端倒計(jì)時(shí)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-02-02
這篇文章主要為大家詳細(xì)介紹了JavaScript快速實(shí)現(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要分享了js獲取標(biāo)簽元素data-*屬性值的4種方法，標(biāo)簽上有兩個(gè)屬性??data-id????和???data-user-name??,?需要通過js去獲取，下面文章具體介紹需要的小伙伴可以參考一下2022-06-06
在ES5與ES6環(huán)境下處理函數(shù)默認(rèn)參數(shù)的實(shí)現(xiàn)方法
本文給大家介紹在ES5與ES6環(huán)境下處理函數(shù)默認(rèn)參數(shù)的實(shí)現(xiàn)方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
這篇文章主要給大家介紹了關(guān)于JavaScript中scrollTo()無效問題處理辦法,scrollTo()方法將文檔滾動(dòng)到指定的坐標(biāo),如需使 scrollTo()方法起作用,文檔必須大于屏幕,并且滾動(dòng)條必須可見,需要的朋友可以參考下2024-01-01
微信小程序?qū)崿F(xiàn)抖音播放效果的實(shí)例代碼
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)抖音播放效果的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-04-04