本篇文章給大家分享的是有關(guān)微信小程序中怎么自定義tabBar組件，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、做網(wǎng)站、臨潁網(wǎng)絡(luò)推廣、微信小程序開發(fā)、臨潁網(wǎng)絡(luò)營銷、臨潁企業(yè)策劃、臨潁品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們最大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供臨潁建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：www.cdcxhl.com

目錄

template文件夾里存放tabbar模板。
template/template.wxml

 
 
  
  
  {{item.text}}
   
 
 

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;
}
/*當(dāng)前字體顏色*/
.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']//換當(dāng)前的icon
 otabbar[id]['current'] = 1;
 bindData[bindName] = otabbar
 that.setData({ bindData });
}

module.exports = {
 tabbar: tabbarmain
}

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

@import "/template/template.wxss";

在index文件夾

index.wxml

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
 },

})

以上就是微信小程序中怎么自定義tabBar組件，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降?。希望你能通過這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。