微信小程序自定義tabbar實(shí)現(xiàn)突出樣式詳解流程
前言
昨天主管突然給我說(shuō)微信小程序默認(rèn)的 tabBar 不美觀，讓我改成中間突出的那種樣式?？v然我心里面有千般不情愿，但還是接下了這個(gè)任務(wù)。查了一下文檔 自定義 tabBar 發(fā)現(xiàn)有這個(gè)方法，有思路了就趕緊搞起來(lái)，以下是我的開(kāi)發(fā)經(jīng)驗(yàn)分享。
一、自定義tabbar欄配置
- 在 app.json 文件中的 tabBar 中指定 custom 字段為 true（意思是允許使用自定義 tabBar）；
- 在 app.json 中全局開(kāi)啟使用組件，或者在所有涉及的 tab 頁(yè) json 中申明usingComponents 項(xiàng)；
- 在 app.json 中添加作為 tabBar 欄的頁(yè)面；
示例代碼
"tabBar": {
"custom": true,
"color": "#afafaf",
"selectedColor": "#0099f6",
"backgroundColor": "#F7F8F8",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁(yè)"
},
{
"pagePath": "pages/goodIndexCopy/goodIndexCopy",
"text": "易購(gòu)商城"
},
{
"pagePath": "pages/release/release",
"text": "發(fā)布"
},
{
"pagePath": "pages/nearby/nearby",
"text": "本地"
},
{
"pagePath": "pages/mine/mine",
"text": "我的"
}
]
},
"usingComponents": {},
pagePath 是自己添加的頁(yè)面，text 是tabBar上展示的文字。
二、添加自定義tabbar欄組件
在根目錄下創(chuàng)建 custom-tab-bar 文件夾，并在該文件夾下新建 Component，或者新建 Page，但是這種創(chuàng)建方式需要自己改動(dòng)一些代碼，在這里我們選用新建 Component 的方式。
添加組件代碼
1、完善 wxml 文件代碼，tabBar 欄需要展示的頁(yè)面是一個(gè)固定的數(shù)組，可以使用 wx:for 循環(huán)展示，在這里用到 selected 這個(gè)字段，這個(gè)字段的作用是幫助展示 tabBar 選中和未選中的樣式。
<!--custom-tab-bar/index.wxml-->
<view class="tab-bar">
<view wx:for="{{list}}" wx:key="index" class="tab-bar-item {{item.bulge?'bulge':''}}" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
<view wx:if="item.bulge" class="tab-bar-bulge"></view>
<image class="image" src="{{selected == index ? item.selectedIconPath : item.iconPath}}"></image>
<!-- <view wx:if="{{item.text}}" style="color: {{selected === index ? selectedColor : color}}" class="tab-bar-view">{{item.text}}</view> -->
<view class="tab-bar-view" style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</view>
</view>
</view>
2、完善 js 文件代碼，list 數(shù)組就是在 tabBar 欄展示的頁(yè)面信息，switchTab 方法作用可以出看來(lái)是負(fù)責(zé)跳轉(zhuǎn)頁(yè)面。其它的字段相信各位都知道，這里就不再描述。
/**
* 組件的初始數(shù)據(jù)
*/
data: {
selected: 0,
color: "#afafaf",
selectedColor: "#0099f6",
backgroundColor: "#F7F8F8",
list: [
{
pagePath: "/pages/index/index",
iconPath: "/images/icon/wtc/icon_zhuye2.png",
selectedIconPath: "/images/icon/wtc/icon_zhuye2_d.png",
text: "首頁(yè)",
},
{
pagePath: "/pages/goodIndexCopy/goodIndexCopy",
iconPath: "/images/icon/wtc/icon_pintuan2.png",
selectedIconPath: "/images/icon/wtc/icon_pintuan2_d.png",
text: "易購(gòu)商城"
},
{
pagePath: "/pages/release/release",
bulge:true,
iconPath: "/images/add.png",
selectedIconPath: "/images/add-active.png",
text: "發(fā)布"
},
{
pagePath: "/pages/nearby/nearby",
iconPath: "/images/icon/wtc/icon_pintuan3.png",
selectedIconPath: "/images/icon/wtc/icon_pintuan3_d.png",
text: "本地",
},
{
pagePath: "/pages/mine/mine",
iconPath: "/images/icon/wtc/icon_wode3.png",
selectedIconPath: "/images/icon/wtc/icon_wode3_d.png",
text: "我的"
},
]
},
/**
* 組件的方法列表
*/
methods: {
switchTab(e) {
// console.log(e);
const data = e.currentTarget.dataset;
const url = data.path;
wx.switchTab({url})
}
}
3、完善 wxss 文件代碼。
.tab-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: #FFF;
display: flex;
line-height: 1.2;
padding-bottom: env(safe-area-inset-bottom);
border-top: 1px solid #e6e6e6;
}
.tab-bar-item {
flex: 1;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.tab-bar-item .image {
width: 26px;
height: 26px;
}
.bulge {
background-color: #FFF;
}
.bulge .tab-bar-bulge{
position: absolute;
z-index: -1;
width: 64px;
height: 64px;
top: -24px;
border-radius: 50%;
border-top: 1px solid #e6e6e6;
background-color: #FFF;
}
.bulge .image{
position: absolute;
width: 50px;
height: 50px;
top: -20px;
}
.bulge .tab-bar-view{
position: relative;
bottom: -16px;
margin-top: 4px;
}
.tab-bar-item .tab-bar-view {
font-size: 12px;
margin-top: 4px;
}
創(chuàng)建全局字段
做完以上工作之后，我們可以就可以看一下效果了，是不是就以為這樣就可以了呢？但是事與愿違，會(huì)發(fā)現(xiàn)這里存在 bug，在我們點(diǎn)擊 tabBar 欄進(jìn)行跳轉(zhuǎn)的時(shí)候會(huì)發(fā)現(xiàn)頁(yè)面跳轉(zhuǎn)過(guò)去了，但是對(duì)應(yīng)頁(yè)面的 tabBar 沒(méi)有改變顏色。為了解決這個(gè) bug，需要添加全局字段。在 app.js 文件中創(chuàng)建該字段。
globalData: {
selected: 0
},
在組件中保存重要字段
全局字段創(chuàng)建完成之后，我們需要在組件 js 文件中使用該字段，在 ready 函數(shù)中保存這個(gè)字段，在點(diǎn)擊 tabBar 欄時(shí)，把相應(yīng)的index 賦值給這個(gè)全局字段。
// 引入全局函數(shù)
const app = getApp()
Component({
/**
* 組件的初始數(shù)據(jù)
*/
data: {
selected: 0,
color: "#afafaf",
selectedColor: "#0099f6",
backgroundColor: "#F7F8F8",
list: [
{
pagePath: "/pages/index/index",
iconPath: "/images/icon/wtc/icon_zhuye2.png",
selectedIconPath: "/images/icon/wtc/icon_zhuye2_d.png",
text: "首頁(yè)",
},
{
pagePath: "/pages/goodIndexCopy/goodIndexCopy",
iconPath: "/images/icon/wtc/icon_pintuan2.png",
selectedIconPath: "/images/icon/wtc/icon_pintuan2_d.png",
text: "易購(gòu)商城"
},
{
pagePath: "/pages/release/release",
bulge:true,
iconPath: "/images/add.png",
selectedIconPath: "/images/add-active.png",
text: "發(fā)布"
},
{
pagePath: "/pages/nearby/nearby",
iconPath: "/images/icon/wtc/icon_pintuan3.png",
selectedIconPath: "/images/icon/wtc/icon_pintuan3_d.png",
text: "本地",
},
{
pagePath: "/pages/mine/mine",
iconPath: "/images/icon/wtc/icon_wode3.png",
selectedIconPath: "/images/icon/wtc/icon_wode3_d.png",
text: "我的"
},
]
},
ready: function() {
this.setData({
selected: app.globalData.selected
})
},
/**
* 組件的方法列表
*/
methods: {
switchTab(e) {
// console.log(e);
const data = e.currentTarget.dataset;
const url = data.path;
app.globalData.selected = data.index;
wx.switchTab({url})
}
}
})
添加完成后，可以測(cè)試一下效果，發(fā)現(xiàn)剛才的 bug 已經(jīng)解決。perfect?。?/code>
三、效果展示
到此這篇關(guān)于微信小程序自定義tabbar實(shí)現(xiàn)突出樣式詳解流程的文章就介紹到這了,更多相關(guān)小程序自定義tabbar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js defineSetter -給js的 "class"自動(dòng)增加一個(gè)set的屬性(方法)
js defineSetter -給js的 "class"自動(dòng)增加一個(gè)set的屬性(方法)...2007-06-06
js操作textarea方法集合封裝(兼容IE,firefox)
在DOM里面操作textarea里面的字符，是比較麻煩的。于是我有這個(gè)封裝分享給大家，測(cè)試過(guò)IE6,8, firefox ,chrome, opera , safari。兼容沒(méi)問(wèn)題。2011-02-02
抓取JavaScript動(dòng)態(tài)加載的內(nèi)容的方法總結(jié)
JavaScript動(dòng)態(tài)加載的內(nèi)容常見(jiàn)于現(xiàn)代Web應(yīng)用中,用于增強(qiáng)用戶(hù)體驗(yàn)和減少初始頁(yè)面加載時(shí)間,然而,這些動(dòng)態(tài)加載的內(nèi)容對(duì)于傳統(tǒng)的網(wǎng)頁(yè)抓取工具來(lái)說(shuō)往往是不可見(jiàn)的,本文主要介紹了有JavaScript動(dòng)態(tài)加載的內(nèi)容如何抓取,需要的朋友可以參考下2024-09-09
幾個(gè)javascript操作word的參考代碼，對(duì)于具體的調(diào)用代碼，大家可以參考我們的上一篇文章。2009-10-10
基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記
這篇文章主要介紹了基于javascript實(shí)現(xiàn)tab選項(xiàng)卡切換特效調(diào)試筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-03-03
這篇文章主要介紹了有關(guān)iframe的實(shí)用操作，包括高度、傳遞數(shù)據(jù)等等，感興趣的朋友可以參考下2014-04-04
JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼(包括Tab,選項(xiàng)卡,橫向等效果)
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)菜單效果代碼,以實(shí)例形式實(shí)現(xiàn)了包括Tab,選項(xiàng)卡,橫向等效果,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-09-09
本文主要介紹了使用canvas實(shí)現(xiàn)刮刮卡效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
使用BootStrap實(shí)現(xiàn)懸浮窗口的效果
本文給大家分享使用BootStrap實(shí)現(xiàn)懸浮窗口的效果，神奇的 bootstrap就自帶了這個(gè)功能。所以就用bootstrap的popover插件做了，效果還不錯(cuò)，感興趣的朋友參考下吧2016-12-12
JS co 函數(shù)庫(kù)的含義和用法實(shí)例總結(jié)
這篇文章主要介紹了JS co 函數(shù)庫(kù)的含義和用法,結(jié)合實(shí)例形式總結(jié)分析了JS co 函數(shù)庫(kù)的基本含義、功能、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04