微信小程序?qū)崿F(xiàn)自定義底部導(dǎo)航
更新時(shí)間：2020年11月18日 09:20:03 作者：Archer_yy
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)自定義底部導(dǎo)航，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)底部導(dǎo)航的具體代碼，供大家參考，具體內(nèi)容如下
建一個(gè)tabbar.wxml組件
<template name="tabBar">
<view class="tab-bar" style="color: {{tabBar.color}}; background: {{tabBar.backgroundColor}}; {{tabBar.position=='top'? 'top: 0' : 'bottom: 0'}};">
<block wx:for="{{tabBar.list}}" wx:key="pagePath">
<navigator hover-class="none" url="{{item.pagePath}}" open-type="redirect" class="tabbar_item {{item.clas}}" style="{{item.active? 'color: '+(item.selectedColor? item.selectedColor : tabBar.selectedColor) : ''}};position:relative;">
<image src="{{item.selectedIconPath}}" wx:if="{{item.active&&item.selectedIconPath}}" class="img"></image>
<image src="{{item.iconPath}}" wx:if="{{!item.active&&item.iconPath}}" class="img"></image>
<image src="{{item.logo}}" wx:if="{{item.logo}}" style="width:110rpx;height:110rpx;border:10rpx solid #ffffff;border-radius:50%;position:absolute;top:-50%;left:-40%,"></image>
<text class="tabbar_text" wx:if="{{item.text}}">{{item.text}}</text>
</navigator>
</block>
</view>
</template>
app.js中定義
editTabBar: function () {
//使用getCurrentPages可以獲取當(dāng)前加載中所有的頁(yè)面對(duì)象的一個(gè)數(shù)組，數(shù)組最后一個(gè)就是當(dāng)前頁(yè)面。
var curPageArr = getCurrentPages(); //獲取加載的頁(yè)面
var curPage = curPageArr[curPageArr.length - 1]; //獲取當(dāng)前頁(yè)面的對(duì)象
var pagePath = curPage.route; //當(dāng)前頁(yè)面url
if (pagePath.indexOf('/') != 0) {
pagePath = '/' + pagePath;
}
var tabBar = this.globalData.tabBar;
for (var i = 0; i < tabBar.list.length; i++) {
tabBar.list[i].active = false;
if (tabBar.list[i].pagePath == pagePath) {
tabBar.list[i].active = true; //根據(jù)頁(yè)面地址設(shè)置當(dāng)前頁(yè)面狀態(tài)
}
}
curPage.setData({
tabBar: tabBar
});
},
globalData: {
tabBar: {
"color": "#B0B6B8",
"selectedColor": "#4877BD",
"backgroundColor": "#ffffff",
"borderStyle": "#ccc",
"list": [{
"pagePath": "/pages/messagelist/messagelist",
"text": "消息",
"iconPath": "/img/message-1.png",
"selectedIconPath": "/img/message-2.png",
"selectedColor": "#4877BD",
"clas": "menu-item",
active: false
},
{
"pagePath": "/pages/salefriend/salefriend",
"text": "名片",
"iconPath": "/img/card-1.png",
"selectedIconPath": "/img/card-2.png",
"selectedColor": "#4877BD",
"clas": "menu-item",
active: false
},
{
"pagePath": "/pages/customnav/customnav",
"text": "",
// "iconPath": "/img/gifts.png",
// "selectedIconPath": "/img/gifts.png",
"logo":"/img/logo.png",
"selectedColor": "#4877BD",
"clas": "menu-item",
islogo:true,
active: false
},
{
"pagePath": "/pages/salescircle/salescircle",
"text": "發(fā)現(xiàn)",
"iconPath": "/img/discover-1.png",
"selectedIconPath": "/img/discover-2.png",
"selectedColor": "#4877BD",
"clas": "menu-item",
active: false
},
{
"pagePath": "/pages/mine/mine",
"text": "我的",
"iconPath": "/img/mine-1.png",
"selectedIconPath": "/img/mine-2.png",
"selectedColor": "#4877BD",
"clas": "menu-item",
active: false
}
],
"position": "bottom"
},
},
在需要用的導(dǎo)航的頁(yè)面的wxml
<import src="/components/tabbar.wxml" />
<template is="tabBar" data="{{tabBar}}" />
在需要用的導(dǎo)航的頁(yè)面的js中
const app = getApp();
onShow: function () {
app.editTabBar(); //顯示自定義的底部導(dǎo)航
},
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript動(dòng)態(tài)判斷html元素并執(zhí)行不同的操作
在javascript中對(duì)觸發(fā)事件的元素進(jìn)行判斷，然后執(zhí)行不同的操作，下面是具體的實(shí)現(xiàn)，需要的朋友可以學(xué)習(xí)下2014-06-06
JavaScript實(shí)現(xiàn)級(jí)聯(lián)菜單的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)級(jí)聯(lián)菜單的方法,涉及javascript頁(yè)面元素操作的相關(guān)技巧,需要的朋友可以參考下2015-06-06
今天凌晨，微信負(fù)責(zé)人張小龍?jiān)谖⑿排笥讶癯隽艘唤M圖，網(wǎng)友看到紛紛“炸裂”，這到底是什么？是的，微信小程序如約上線，微信小程序怎么打開，微信小程序在哪里進(jìn)入，請(qǐng)閱讀本文2017-01-01
基于Bootstrap分頁(yè)的實(shí)例講解(必看篇)
下面小編就為大家?guī)?lái)一篇基于Bootstrap分頁(yè)的實(shí)例講解(必看篇)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了JavaScript中return的用法,包括return定義，寫法等方面的知識(shí)，需要的朋友可以參考下2017-05-05
簡(jiǎn)單通過(guò)settimeout看javascript的運(yùn)行機(jī)制
這篇文章主要給大家介紹了關(guān)于如何通過(guò)settimeout看javascript的運(yùn)行機(jī)制的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了JS注入eval, Function系統(tǒng)函數(shù)并截獲動(dòng)態(tài)代碼,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-12-12
JavaScript創(chuàng)建防篡改對(duì)象的方法分析
這篇文章主要介紹了JavaScript創(chuàng)建防篡改對(duì)象的方法,結(jié)合具體實(shí)例形式分析了javascript基于不可擴(kuò)展對(duì)象、密封的對(duì)象和凍結(jié)的對(duì)象實(shí)現(xiàn)防篡改對(duì)象的相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
下面小編就為大家?guī)?lái)一篇淺談js的解析順序 作用域 嚴(yán)格模式。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
深入理解ES6 Promise 擴(kuò)展always方法
本篇文章主要介紹了ES6 Promise 擴(kuò)展always方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09