微信小程序自定義菜單切換欄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)文章
這篇文章主要為大家詳細(xì)介紹了js原生Ajax的封裝和原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
這篇文章主要介紹了javascript頁面渲染速度測試腳本,計算瀏覽器渲染HTML頁面所需要的時間,需要的朋友可以參考下2014-04-04
微信小程序云開發(fā)使用方法新手初體驗，開發(fā)者可以使用云開發(fā)開發(fā)微信小程序、小游戲，無需搭建服務(wù)器，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
工作需要寫的一個js拖拽組件，需要的朋友可以參考下代碼。2011-07-07
這篇文章主要介紹了JS數(shù)組方法join()用法,結(jié)合實例形式分析了JS數(shù)組join()方法具體功能、定義、使用方法及相關(guān)操作注意事項,需要的朋友可以參考下2020-01-01
微信小程序?qū)崿F(xiàn)發(fā)送驗證碼按鈕效果
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)發(fā)送驗證碼按鈕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Layui實現(xiàn)主窗口和Iframe層參數(shù)傳遞
今天小編就為大家分享一篇Layui實現(xiàn)主窗口和Iframe層參數(shù)傳遞，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
這篇文章主要給大家介紹了關(guān)于js繼承的6種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
如何使用bootstrap框架 bootstrap入門必看!
如何使用bootstrap？這篇文章就是告訴大家如何使用bootstrap框架，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
在web頁面中，我們經(jīng)常需要通過修改樣式（style）來達(dá)到更好的用戶體驗，需要的朋友可以參考下。2010-10-10