微信小程序自定義菜單切換欄tabbar組件代碼實例

更新時間：2019年12月30日 11:14:56 作者：許寶

這篇文章主要介紹了微信小程序自定義菜單切換欄tabbar組件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

效果圖：

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: ["軍事", "明星", "動漫","風景"],
  tabIndex: 0
 },
//獲取點擊事件
handleItem(e){
  // console.log(e)
  const index = e.currentTarget.dataset.index
  this.setData({
   tabIndex: index
  })
 }

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

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