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