對於剛接觸小程序的小白來說,總是難免會遇到各種坑,唯獨只有記錄下來踩坑的過程,才能在後期避免在同一個地方不斷的跌倒。tabbar導航是最常見的展現形式,但是爲了展現自己獨有的特色,往往會設計的稍微與衆不同,首先要實現通用的tabbar效果,其次還要有個性化的樣式,這就難到剛接觸的大部分人。 剛接觸小程序只能在網上搜索,其次翻閱官方文檔,目前感覺官方文檔部分還是稍微有點亂,每次想找個接口或者組件,總感覺不只一個地方,就比如這個tabbar。
原始的tabbar屬於擴展能力:https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html
自定義的tabbar卻在指南里:https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html對於新手來說這樣的操作完全不適應,也搞不懂爲什麼不能放在一起,明明就是一類東西及他的擴展,哎,一家獨大的東西只能去適應。
直接上自定義tabbar:
一、按照官方的定義,首先需要在app.json裏配置tabbar數據,官方的標準直接看以上鍊接就可以,自己通過嘗試,發現只要配置最重要的配置就可以:
"pages": [
"pages/logs/logs",
"pages/index/index",
"pages/user/user",
"pages/list/list"
],
"tabBar": {
"custom": true, //自定義tabbar必須指定當前屬性爲true
"list": [
{
"pagePath": "pages/logs/logs"
},
{
"pagePath": "pages/list/list"
},
{
"pagePath": "pages/index/index"
},
{
"pagePath": "pages/user/user"
}
]
},
"usingComponents": {}
需要在頁面展現的tabbar對應的頁面,必須在這裏進行配置,否則點擊tab切換會報錯:
switchTab:fail can not switch to no-tabBar page
意思就是要切換的頁面沒有在tabbar裏進行配置,所有頁面也必須在pages裏面進行配置。
所有 tab 頁的 json 裏需聲明 usingComponents 項,也可以在 app.json 全局開啓。
二、在根目錄新建目錄 custom-tab-bar , 目錄下面建立 index.js , index.wxss , index.json , index.wxml , 名字必須是這樣的,不能定義其他的,至於爲什麼,目前不知道。
index.wxml
<cover-view class="tab-bar">
<cover-view class="tab-bar-border"></cover-view>
<cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
<cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
</cover-view>
</cover-view>
index.wxss
/* custom-tab-bar/tabbar.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;
}
index.js
// custom-tab-bar/tabbar.js
Component({
/**
* 組件的屬性列表
*/
properties: {
},
/**
* 組件的初始數據
*/
data: {
selected: 0,
color: "#f60",
selectedColor: "#3cc51f",
color: "#7A7E83",
"selectedColor": "#f00",
"borderStyle": "black",
backgroundColor: "#ffffff",
list: [
{
pagePath: "/pages/logs/logs",
text: "首頁",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png"
},
{
"pagePath": "/pages/user/user",
text: "用戶",
iconPath: "/image/icon_component.png",
selectedIconPath: "/image/icon_component_HL.png"
}, {
pagePath: "/pages/list/list",
text: "列表",
iconPath: "/image/icon_API.png",
selectedIconPath: "/image/icon_API_HL.png"
},
{
"pagePath": "/pages/index/index",
text: "會員中心",
iconPath: "/image/icon_component.png",
selectedIconPath: "/image/icon_component_HL.png"
}
]
},
/**
* 組件的方法列表
*/
methods: {
switchTab(e) {
const data = e.currentTarget.dataset
const url = data.path
console.log("切換index>>>"+data.index);
wx.switchTab({ url })
this.setData({
selected: data.index
})
}
}
})
這個頁面必須配置完整的數據,tabbar展示的數據從這裏的list獲取,switchTab方法就是切換tab事件,都很容易看懂,就不詳細說明。
三、在pages裏建立對應的tab切換頁面,就是第一步配置的頁面,必須存在。(頁面的位置不一定要在pages裏,可以自己歸納,只要配置路徑正確就可以)
基礎的搭建到此爲止,可以運行起來了,編譯試試,會發現,tabbar效果有了,但是切換的時候,第一次點擊tab頁面切換了,但是tab圖標和文字顏色效果沒有變化,點擊第二次纔會有效果,這個應該是點擊之後沒有在tab頁面設定tabbar的 select index,不知道是不是bug,這裏需要在每一個tab頁面的onShow裏添加如下方法:
onShow: function () {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 3 //這裏的數字設置當前頁面在tabbar裏對應的序列,從0開始
})
}
}
此時再次編譯,大功告成。
四、如果需要導航樣式個性化處理的,可以修改index.wxml , index.wxss 結合數據狀態進行操作,譬如:
這裏因爲只是修改頁面和樣式文件,每家都不一樣,就不展示代碼了。