微信小程序自定義tabBar組件開發(fā)詳解

更新時間：2020年09月24日 15:29:15 作者：kitt15

這篇文章主要為大家詳細介紹了微信小程序自定義tabBar組件開發(fā)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了微信小程序自定義tabBar組件的具體代碼，供大家參考，具體內(nèi)容如下

以下代碼保存在github地址

先看一看目錄

template文件夾里存放tabbar模板。

template/template.wxml

<template name="tabBar">
<view class="tabBar">
 <block wx:for="{{tabBar}}" wx:for-item="item" wx:key="tabBar">
 <view class="tabBar-item">
 <navigator open-type="redirect" url="{{item.pagePath}}">
 <view><image class="icon" src='{{item.iconPath}}'></image></view>
 <view class="{{item.current== 1 ? 'tabBartext' :''}}">{{item.text}}</view>
 </navigator> 
 </view>
 </block>
</view>
</template>

template.css

.icon{
 width:54rpx;
 height: 54rpx;
}
.tabBar{
 width:100%;
 position: fixed;
 bottom:0;
 padding:10rpx;
 margin-left:-4rpx;
 background:#F7F7FA;
 font-size:20rpx;
 color:#8A8A8A;
 box-shadow: 6rpx 6rpx 6rpx 6rpx #aaa;
}

 .tabBar-item{
 float:left;
 width:25%;
 text-align: center;
 overflow: hidden;
}
/*當前字體顏色*/
.tabBartext{
 color:red;
}

template.js

//初始化數(shù)據(jù)
function tabbarinit() {
 return [
 { "current":0,
 "pagePath": "/pages/index/index",
 "iconPath": "/imgs/home.png",
 "selectedIconPath": "/imgs/home_on.png",
 "text": "主頁"
 },
 {
 "current": 0,
 "pagePath": "/pages/news/news",
 "iconPath": "/imgs/message.png",
 "selectedIconPath": "/imgs/message_on.png",
 "text": "資訊"

 },
 {
 "current": 0,
 "pagePath": "/pages/category/category",
 "iconPath": "/imgs/category.png",
 "selectedIconPath": "/imgs/category_on.png",
 "text": "分類"
 },
 {
 "current": 0,
 "pagePath": "/pages/buy/buy",
 "iconPath": "/imgs/buy.png",
 "selectedIconPath": "/imgs/buy_on.png",
 "text": "購物"
 }
 ]

}
//tabbar 主入口
function tabbarmain(bindName = "tabdata", id, target) {
 var that = target;
 var bindData = {};
 var otabbar = tabbarinit();
 otabbar[id]['iconPath'] = otabbar[id]['selectedIconPath']//換當前的icon
 otabbar[id]['current'] = 1;
 bindData[bindName] = otabbar
 that.setData({ bindData });
}

module.exports = {
 tabbar: tabbarmain
}

到此改組件完成，然后講解一下使用方法。
我們先把樣式載入到app.wxss

@import "/template/template.wxss";

在index文件夾

index.wxml

<import src="../../template/template.wxml"/>
<template is="tabBar" data="{{tabBar:bindData.tabBar}}"/>

index.js

const app = getApp()
var template = require('../../template/template.js');
Page({
 data: {

 },
 onLoad: function () {
 template.tabbar("tabBar", 0, this)//0表示第一個tabbar
 },
})

news.wxml與index.wxml一樣
news.js如下

const app = getApp()
var template = require('../../template/template.js');
Page({
 data: { },

 onLoad: function () {
 template.tabbar("tabBar", 1, this)//1表示第二個tabbar
 },

})

效果如圖