微信小程序自定義菜單切換欄tabbar組件代碼實(shí)例
更新時(shí)間：2019年12月30日 11:14:56 作者：許寶
這篇文章主要介紹了微信小程序自定義菜單切換欄tabbar組件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
這篇文章主要介紹了微信小程序自定義菜單切換欄tabbar組件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
效果圖：
wxml代碼：
<view class="top_tabbar" >
<block wx:for="{{itemName}}" wx:key="{{index}}">
<view class="item_name {{tabIndex == index ? 'active' : ''}}" bindtap="handleItem" data-index="{{index}}">
<text>{{item}}</text>
</view>
</block>
</view>
wxss代碼：
.top_tabbar{
width: 100%;
background-color: #ffffff;
display: flex;
position: fixed;
}
.item_name{
text-align: center;
margin:20rpx 60rpx;
color: grey;
}
.active{
color: lightgreen;
}
.active text{
padding-bottom: 10rpx;
border-bottom: 4rpx solid lightgreen;
}
js代碼：
data:{
itemName: ["軍事", "明星", "動(dòng)漫","風(fēng)景"],
tabIndex: 0
},
//獲取點(diǎn)擊事件
handleItem(e){
// console.log(e)
const index = e.currentTarget.dataset.index
this.setData({
tabIndex: index
})
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
當(dāng)一個(gè)網(wǎng)站有很多js代碼要加載，js代碼放置的位置在一定程度上將會(huì)影像網(wǎng)頁(yè)的加載速度，為了讓我們的網(wǎng)頁(yè)加載速度更快，本文總結(jié)了一下幾個(gè)注意點(diǎn)，分享給大家2015-05-05
在寫js腳本的時(shí)候我們必須對(duì)一件事保持警惕，就是避免異常的發(fā)生。在本篇文章里面，我想談?wù)勔徊糠诸愋蜋z測(cè)，有需要的可以參考學(xué)習(xí)。2016-07-07
這篇文章主要介紹了webpack css加載和圖片加載的方法示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-09-09
js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
Bootstrap模態(tài)對(duì)話框用法簡(jiǎn)單示例
這篇文章主要介紹了Bootstrap模態(tài)對(duì)話框用法,結(jié)合實(shí)例形式分析了Bootstrap模態(tài)對(duì)話框的簡(jiǎn)單創(chuàng)建與使用操作技巧,需要的朋友可以參考下2018-08-08
在本章中，我們將分析John Resig關(guān)于JavaScript繼承的一個(gè)實(shí)現(xiàn) - Simple JavaScript Inheritance,需要的朋友可以參考下2016-10-10
js實(shí)現(xiàn)黑色簡(jiǎn)易的滑動(dòng)門網(wǎng)頁(yè)tab選項(xiàng)卡效果
這篇文章主要介紹了js實(shí)現(xiàn)黑色簡(jiǎn)易的滑動(dòng)門網(wǎng)頁(yè)tab選項(xiàng)卡效果,可實(shí)現(xiàn)簡(jiǎn)單的鼠標(biāo)滑過tab項(xiàng)切換對(duì)應(yīng)菜單的功能,涉及javascript鼠標(biāo)事件控制頁(yè)面元素的遍歷與樣式改變實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
js對(duì)于wmp的一些屬性與方法，方便大家控制音樂的播放的一些細(xì)節(jié)2008-11-11
webpack是一種前端資源構(gòu)建工具,一個(gè)靜態(tài)模塊打包器(module bundler),下面這篇文章主要給大家介紹了關(guān)于Webpack完整打包流程的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12
typeof 在js中typeof是檢查類型的,在ts中也有這個(gè)功能,下面這篇文章主要給大家介紹了關(guān)于TypeScript基本類型之typeof和keyof的相關(guān)資料,需要的朋友可以參考下2023-04-04