先看一看目录
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
//初始化数据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 },})
效果如图
相关推荐：
微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）
微信小程序实例：获取当前城市位置及再次授权地理位置的代码实现
以上就是微信小程序自定义底部tarbar的代码实现的详细内容。