今天看了微信官方文檔
自定義 tabBar · 小程序 配置的路徑要是同級下的第一級目錄，滿足不了我們需求所以自制了個tabBar組件,步驟如下:
開發前就應該 清除小程序自帶的tabBa
很多在app.js裏面調用wx.hideTabBar()方法清除微信小程序自己的tabBar();
onLoad: function (options) {
wx.hideTabBar();
},
我直接在app.json如下
{
"pages": [
"pages/index/index",
"pages/ucenter/ucenter",
"pages/login/login",
"pages/search/search",
"pages/daohang/daohang"
],
"wx.hideTabBar": {
"color": "#75175b",
"selectedColor": "#75175b",
"list": [
{
"pagePath": "pages/index/index",
"text": "主頁",
"iconPath": "images/icon/home-b-cion.png",
"selectedIconPath": "images/icon/home-a-cion.png"
}
1.新建tabTemplate文件夾用於保存tabBar模板，tabTemplate/index.wxml
<template name="tabBar">
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{tabBar}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<navigator open-type="reLaunch" url="{{item.pagePath}}">
<cover-image src="{{item.current== 1 ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{item.current== 1 ? selectedColor : color}}">{{item.text}}</cover-view>
</navigator>
</cover-view>
</cover-view>
</template>
2.tabTemplate/index.wxss
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 48px;
background: white;
display: flex;
padding-bottom: env(safe-area-inset-bottom);
}
.tab-bar-border {
background-color: rgba(0, 0, 0, 0.33);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 1px;
transform: scaleY(0.5);
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item cover-image {
width: 27px;
height: 27px;
}
.tab-bar-item cover-view {
font-size: 10px;
}
.tab-bar-item:nth-child(4){
height: 75px;
}
.tab-bar-item:nth-child(4) cover-image{
width: 50px;
height: 50px;
margin-top: -30px;
}
3.tabTemplate/index.js,初始化數據
//初始化數據
function tabbarinit() {
return [
{
"current": 0,
"pagePath": "/pages/index/index",
"text": "主頁",
"iconPath": "/images/icon/home-b-cion.png",
"selectedIconPath": "/images/icon/home-a-cion.png"
},
{
"current": 0,
"pagePath": "/pages/ucenter/ucenter",
"text": "導覽",
"iconPath": "/images/icon/guide-b-cion.png",
"selectedIconPath": "/images/icon/guide-a-cion.png"
},
{
"current": 0,
"pagePath": "/pages/ucenter/ucenter",
"iconPath": "/images/icon/release-b-cion.png",
"selectedIconPath": "/images/icon/release-a-cion.png"
},
{
"current": 0,
"pagePath": "/pages/ucenter/ucenter",
"text": "遊記",
"iconPath": "/images/icon/travels-b-icon.png",
"selectedIconPath": "/images/icon/travels-a-icon.png"
},
{
"current": 0,
"pagePath": "/pages/ucenter/ucenter",
"text": "個人中心",
"iconPath": "/images/icon/member-b-icon.png",
"selectedIconPath": "/images/icon/member-a-icon.png"
}
]
}
//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
}
4.使用方法
先把樣式文件載入app.wxss
@import "/tabTemplate/index.wxss";
新建一個頁面，比如index.wxml,引入模板
<import src="../../tabTemplate/index.wxml"/>
index.js 初始化數據
var template = require('../../tabTemplate/index.js');
Page({
onLoad: function () {
template.tabbar("tabBar", 0, this)//0表示第一個tabbar
},
})
導航樣式完全有css控制 最終預覽如下
