Taro小程序自定義頂部導(dǎo)航欄功能的實(shí)現(xiàn)
更新時(shí)間：2020年12月17日 09:18:11 作者：帶風(fēng)的少年
這篇文章主要介紹了Taro小程序自定義頂部導(dǎo)航欄功能的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
微信自帶的頂部導(dǎo)航欄是無(wú)法支持自定義icon和增加元素的，在開(kāi)發(fā)小程序的時(shí)候自帶的根本滿足不了需求，分享一個(gè)封裝好的組件，支持自定義icon、擴(kuò)展dom，適配安卓、ios、h5，全面屏。
我用的是京東的Taro多端編譯框架寫(xiě)的小程序，原生的也可以適用，用到的微信/taro的api做調(diào)整就行，實(shí)現(xiàn)效果如下。
1、NavBar.js
import Taro from '@tarojs/taro';
import React, { Component } from 'react'
import { View } from '@tarojs/components';
import { isFunction } from '../../utils/index' //判斷是否為函數(shù)，可以用loadsh的_isFunction,也可以自己封裝。
import './NavBar.less';
function getSystemInfo () {
if (Taro.globalSystemInfo && !Taro.globalSystemInfo.ios) {
return Taro.globalSystemInfo;
} else {
// h5環(huán)境下忽略navbar
if (!isFunction(Taro.getSystemInfoSync)) {
return null;
}
let systemInfo = Taro.getSystemInfoSync() || {
model: '',
system: ''
};
let ios = !!(systemInfo.system.toLowerCase().search('ios') + 1);
let rect;
try {
rect = Taro.getMenuButtonBoundingClientRect ? Taro.getMenuButtonBoundingClientRect() : null;
if (rect === null) {
throw 'getMenuButtonBoundingClientRect error';
}
//取值為0的情況 有可能width不為0 top為0的情況
if (!rect.width || !rect.top || !rect.left || !rect.height) {
throw 'getMenuButtonBoundingClientRect error';
}
} catch (error) {
let gap; //膠囊按鈕上下間距 使導(dǎo)航內(nèi)容居中
let width = 96; //膠囊的寬度
if (systemInfo.platform === 'android') {
gap = 8;
width = 96;
} else if (systemInfo.platform === 'devtools') {
if (ios) {
gap = 5.5; //開(kāi)發(fā)工具中ios手機(jī)
} else {
gap = 7.5; //開(kāi)發(fā)工具中android和其他手機(jī)
}
} else {
gap = 4;
width = 88;
}
if (!systemInfo.statusBarHeight) {
//開(kāi)啟wifi的情況下修復(fù)statusBarHeight值獲取不到
systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;
}
rect = {
//獲取不到膠囊信息就自定義重置一個(gè)
bottom: systemInfo.statusBarHeight + gap + 32,
height: 32,
left: systemInfo.windowWidth - width - 10,
right: systemInfo.windowWidth - 10,
top: systemInfo.statusBarHeight + gap,
width: width
};
console.log('error', error);
console.log('rect', rect);
}
let navBarHeight = '';
if (!systemInfo.statusBarHeight) {
//開(kāi)啟wifi和打電話下
systemInfo.statusBarHeight = systemInfo.screenHeight - systemInfo.windowHeight - 20;
navBarHeight = (function () {
let gap = rect.top - systemInfo.statusBarHeight;
return 2 * gap + rect.height;
})();
systemInfo.statusBarHeight = 0;
systemInfo.navBarExtendHeight = 0; //下方擴(kuò)展4像素高度 防止下方邊距太小
} else {
navBarHeight = (function () {
let gap = rect.top - systemInfo.statusBarHeight;
return systemInfo.statusBarHeight + 2 * gap + rect.height;
})();
if (ios) {
systemInfo.navBarExtendHeight = 4; //下方擴(kuò)展4像素高度 防止下方邊距太小
} else {
systemInfo.navBarExtendHeight = 0;
}
}
systemInfo.navBarHeight = navBarHeight; //導(dǎo)航欄高度不包括statusBarHeight
systemInfo.capsulePosition = rect; //右上角膠囊按鈕信息bottom: 58 height: 32 left: 317 right: 404 top: 26 width: 87 目前發(fā)現(xiàn)在大多機(jī)型都是固定值 為防止不一樣所以會(huì)使用動(dòng)態(tài)值來(lái)計(jì)算nav元素大小
systemInfo.ios = ios; //是否ios
Taro.globalSystemInfo = systemInfo; //將信息保存到全局變量中,后邊再用就不用重新異步獲取了
//console.log('systemInfo', systemInfo);
return systemInfo;
}
}
let globalSystemInfo = getSystemInfo();
class NavBar extends Component {
constructor(props) {
super(props);
this.state = {
configStyle: this.setStyle(globalSystemInfo)
};
}
static options = {
multipleSlots: true,
addGlobalClass: true
};
UNSAFE_componentWillMount () {
//獲取高度
// let query = Taro.createSelectorQuery().in(this.$scope)
// query.select('.lxy-nav-bar').boundingClientRect(rect=>{
// const navHeight = rect.height
// this.props.personalHomeMod.changeState('navHeight',navHeight)
// // console.log('navHeight',toJS(this.props.personalHomeMod.state))
// }).exec()
}
componentDidShow () {
if (globalSystemInfo.ios) {
globalSystemInfo = getSystemInfo();
this.setState({
configStyle: this.setStyle(globalSystemInfo)
});
}
}
handleBackClick () {
if (isFunction(this.props.onBack)) {
this.props.onBack();
} else {
const pages = Taro.getCurrentPages();
if (pages.length >= 2) {
Taro.navigateBack({
delta: this.props.delta
});
}
}
}
handleGoHomeClick () {
if (isFunction(this.props.onHome)) {
this.props.onHome();
}
}
handleSearchClick () {
if (isFunction(this.props.onSearch)) {
this.props.onSearch();
}
}
static defaultProps = {
extClass: '',
background: 'rgba(255,255,255,1)', //導(dǎo)航欄背景
color: '#000000',
title: '',
searchText: '點(diǎn)我搜索',
searchBar: false,
back: false,
home: false,
iconTheme: 'black',
delta: 1
};
setStyle (systemInfo) {
const { statusBarHeight, navBarHeight, capsulePosition, navBarExtendHeight, ios, windowWidth } = systemInfo;
const { back, home, title, color } = this.props;
let rightDistance = windowWidth - capsulePosition.right; //膠囊按鈕右側(cè)到屏幕右側(cè)的邊距
let leftWidth = windowWidth - capsulePosition.left; //膠囊按鈕左側(cè)到屏幕右側(cè)的邊距
let navigationbarinnerStyle = [
`color:${color}`,
//`background:${background}`,
`height:${navBarHeight + navBarExtendHeight}px`,
`padding-top:${statusBarHeight}px`,
`padding-right:${leftWidth}px`,
`padding-bottom:${navBarExtendHeight}px`
].join(';');
let navBarLeft;
if ((back && !home) || (!back && home)) {
navBarLeft = [
`width:${capsulePosition.width}px`,
`height:${capsulePosition.height}px`,
`margin-left:0px`,
`margin-right:${rightDistance}px`
].join(';');
} else if ((back && home) || title) {
navBarLeft = [
`width:${capsulePosition.width}px`,
`height:${capsulePosition.height}px`,
`margin-left:${rightDistance}px`
].join(';');
} else {
navBarLeft = [`width:auto`, `margin-left:0px`].join(';');
}
return {
navigationbarinnerStyle,
navBarLeft,
navBarHeight,
capsulePosition,
navBarExtendHeight,
ios,
rightDistance
};
}
render () {
const {
navigationbarinnerStyle,
navBarLeft,
navBarHeight,
capsulePosition,
navBarExtendHeight,
ios,
rightDistance
} = this.state.configStyle;
const {
title,
background,
backgroundColorTop,
back,
home,
searchBar,
searchText,
iconTheme,
extClass
} = this.props;
let nav_bar__center;
if (title) {
nav_bar__center = <text>{title}</text>;
} else if (searchBar) {
nav_bar__center = (
<View
className='lxy-nav-bar-search'
style={`height:${capsulePosition.height}px;`}
onClick={this.handleSearchClick.bind(this)}
>
<View className='lxy-nav-bar-search__icon' />
<View className='lxy-nav-bar-search__input'>{searchText}</View>
</View>
);
} else {
/* eslint-disable */
nav_bar__center = this.props.renderCenter;
/* eslint-enable */
}
return (
<View
className={`lxy-nav-bar ${ios ? 'ios' : 'android'} ${extClass}`}
style={`background: ${backgroundColorTop ? backgroundColorTop : background};height:${navBarHeight +
navBarExtendHeight}px;`}
>
<View
className={`lxy-nav-bar__placeholder ${ios ? 'ios' : 'android'}`}
style={`padding-top: ${navBarHeight + navBarExtendHeight}px;`}
/>
<View
className={`lxy-nav-bar__inner ${ios ? 'ios' : 'android'}`}
style={`background:${background};${navigationbarinnerStyle};`}
>
<View className='lxy-nav-bar__left' style={navBarLeft}>
{back && !home && (
<View
onClick={this.handleBackClick.bind(this)}
className={`lxy-nav-bar__button lxy-nav-bar__btn_goback ${iconTheme}`}
/>
)}
{!back && home && (
<View
onClick={this.handleGoHomeClick.bind(this)}
className={`lxy-nav-bar__button lxy-nav-bar__btn_gohome ${iconTheme}`}
/>
)}
{back && home && (
<View className={`lxy-nav-bar__buttons ${ios ? 'ios' : 'android'}`}>
<View
onClick={this.handleBackClick.bind(this)}
className={`lxy-nav-bar__button lxy-nav-bar__btn_goback ${iconTheme}`}
/>
<View
onClick={this.handleGoHomeClick.bind(this)}
className={`lxy-nav-bar__button lxy-nav-bar__btn_gohome ${iconTheme}}`}
/>
</View>
)}
{!back && !home && this.props.renderLeft}
</View>
<View className='lxy-nav-bar__center' style={`padding-left: ${rightDistance}px`}>
{nav_bar__center}
</View>
<View className='lxy-nav-bar__right' style={`margin-right: ${rightDistance}px`}>
{this.props.renderRight}
</View>
</View>
</View>
);
}
}
export default NavBar;
2、NavBar.less
view,
text,
scroll-view,
input,
button,
image,
cover-view {
box-sizing: border-box;
}
page {
/* prettier-ignore */
--height: 44PX; /* 4*2+32 */
/* prettier-ignore */
--right: 97PX; /* 10+87 */
/* prettier-ignore */
--navBarExtendHeight: 4PX;
/* prettier-ignore */
--navBarHeight: 68PX;
box-sizing: border-box;
}
.lxy-nav-bar .ios {
/* prettier-ignore */
--height: 44PX; /* 4*2+32 */
/* prettier-ignore */
--right: 97PX; /* 10+87 */
/* prettier-ignore */
--navBarExtendHeight: 4PX;
box-sizing: border-box;
}
.lxy-nav-bar .android {
/* prettier-ignore */
--height: 48PX; /* 8*2+32 */
/* prettier-ignore */
--right: 96PX; /* 10+87 */
/* prettier-ignore */
--navBarExtendHeight: 4PX;
box-sizing: border-box;
}
.lxy-nav-bar .devtools {
/* prettier-ignore */
--height: 42PX; /* 5*2+32 */
/* prettier-ignore */
--right: 88PX; /* 10+87 */
/* prettier-ignore */
--navBarExtendHeight: 4PX;
box-sizing: border-box;
}
.lxy-nav-bar__inner {
position: fixed;
top: 0;
left: 0;
z-index: 5001;
/* prettier-ignore */
height: var(--navBarHeight);
display: flex;
align-items: center;
padding-right: var(--right);
width: 100%;
/* prettier-ignore */
padding-top: 20PX;
/* prettier-ignore */
padding-bottom:4PX;
.placeholder {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
}
.lxy-nav-bar__inner .lxy-nav-bar__left {
position: relative;
width: var(--right);
/* prettier-ignore */
height: 32PX;
/* padding-left: 10PX; */
/* prettier-ignore */
margin-left:10PX;
display: flex;
align-items: center;
}
.lxy-nav-bar__buttons {
height: 100%;
width: 100%;
display: flex;
align-items: center;
/* prettier-ignore */
border-radius: 16PX;
border: 1px solid rgba(204, 204, 204, 0.6);
position: relative;
}
.lxy-nav-bar__buttons.android {
border: 1px solid rgba(234, 234, 234, 0.6);
}
.lxy-nav-bar__buttons::after {
position: absolute;
content: '';
width: 1px;
/* prettier-ignore */
height: 18.4PX;
background: rgba(204, 204, 204, 0.6);
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.lxy-nav-bar__buttons.android::after {
background: rgba(234, 234, 234, 0.6);
}
.lxy-nav-bar__button {
width: 50%;
height: 100%;
display: flex;
/* prettier-ignore */
font-size: 12PX;
background-repeat: no-repeat;
background-position: center center;
background-size: 1em 2em;
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback:active,
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome:active {
opacity: 0.5;
}
.lxy-nav-bar__inner .lxy-nav-bar__center {
/* prettier-ignore */
font-size: 17PX;
/* prettier-ignore */
line-height: 17PX;
text-align: center;
position: relative;
flex: 1;
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
/* prettier-ignore */
padding-left: 10PX;
text {
margin-top: -2px;
font-size:34px;
font-weight:550;
line-height:44px;
}
}
.lxy-nav-bar__inner .lxy-nav-bar__loading {
font-size: 0;
}
.lxy-nav-bar__inner .lxy-nav-bar__loading .lxy-loading {
margin-left: 0;
}
.lxy-nav-bar__inner .lxy-nav-bar__right {
/* prettier-ignore */
margin-right: 10PX;
}
.lxy-nav-bar__placeholder {
height: var(--navBarHeight);
background: #f8f8f8;
position: relative;
z-index: 50;
visibility: hidden;
}
.lxy-nav-bar-search {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
/* prettier-ignore */
height: 32PX;
/* prettier-ignore */
border-radius: 16PX;
position: relative;
background: #f6f6f6;
}
.lxy-nav-bar-search__input {
height: 100%;
display: flex;
align-items: center;
color: #999;
/* prettier-ignore */
font-size: 15PX;
/* prettier-ignore */
line-height: 15PX;
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E");
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_goback.white {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z' fill='%23ffffff'/%3E%3C/svg%3E");
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome {
background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M537.13744054-106.18008097999996c-12.56871953-12.56871953-31.42179957-12.56871953-50.27488108 0L28.10427953 195.46919964000006c-12.56871953 12.56871953-18.85308003 25.13744054-18.85308003 37.70616005l0 609.58292171c0 25.13744054 18.85308003 43.99052059 43.9905191 43.9905191l301.6492806 0c18.85308004 0 31.42179957-12.56871953 31.42180105-31.42179957l0-314.21800013c0-18.85308004 12.56871953-31.42179957 31.42179956-31.42180105l188.53080038 0c18.85308004 0 31.42179957 12.56871953 31.42179956 31.42180105l0 314.21800013c0 18.85308004 12.56871953 31.42179957 31.42180105 31.42179957L970.7582814 886.7488005c25.13744054 0 43.99052059-18.85308003 43.9905191-43.9905191L1014.7488005 233.17535969000005c0-12.56871953-6.2843605-25.13744054-18.85308003-37.70616005l-458.75827993-301.64928062z' fill='%23000000' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
/* prettier-ignore */
background-size: 17PX 34PX;
margin-top: 10px;
}
.lxy-nav-bar__inner .lxy-nav-bar__left .lxy-nav-bar__btn_gohome.white {
background-image: url("data:image/svg+xml,%3Csvg t='1565752242401' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='4326' width='48' height='48'%3E%3Cpath d='M537.13744054-106.18008097999996c-12.56871953-12.56871953-31.42179957-12.56871953-50.27488108 0L28.10427953 195.46919964000006c-12.56871953 12.56871953-18.85308003 25.13744054-18.85308003 37.70616005l0 609.58292171c0 25.13744054 18.85308003 43.99052059 43.9905191 43.9905191l301.6492806 0c18.85308004 0 31.42179957-12.56871953 31.42180105-31.42179957l0-314.21800013c0-18.85308004 12.56871953-31.42179957 31.42179956-31.42180105l188.53080038 0c18.85308004 0 31.42179957 12.56871953 31.42179956 31.42180105l0 314.21800013c0 18.85308004 12.56871953 31.42179957 31.42180105 31.42179957L970.7582814 886.7488005c25.13744054 0 43.99052059-18.85308003 43.9905191-43.9905191L1014.7488005 233.17535969000005c0-12.56871953-6.2843605-25.13744054-18.85308003-37.70616005l-458.75827993-301.64928062z' fill='%23ffffff' p-id='4327'%3E%3C/path%3E%3C/svg%3E");
/* prettier-ignore */
background-size: 17PX 34PX;
margin-top: 10px;
}
.lxy-nav-bar-search__icon {
/* prettier-ignore */
width: 22PX;
/* prettier-ignore */
height: 22PX;
display: flex;
align-items: center;
justify-content: center;
background-image: url("data:image/svg+xml,%3Csvg t='1565691512239' class='icon' viewBox='0 0 1024 1024' version='1.1' xmlns='http://www.w3.org/2000/svg' p-id='1240' width='48' height='48'%3E%3Cpath d='M819.2 798.254545L674.909091 653.963636c46.545455-48.872727 74.472727-114.036364 74.472727-186.181818 0-151.272727-123.345455-274.618182-274.618182-274.618182-151.272727 0-274.618182 123.345455-274.618181 274.618182 0 151.272727 123.345455 274.618182 274.618181 274.618182 65.163636 0 128-23.272727 174.545455-62.836364l144.290909 144.290909c2.327273 2.327273 6.981818 4.654545 11.636364 4.654546s9.309091-2.327273 11.636363-4.654546c6.981818-6.981818 6.981818-18.618182 2.327273-25.6zM235.054545 467.781818c0-132.654545 107.054545-239.709091 239.709091-239.709091 132.654545 0 239.709091 107.054545 239.709091 239.709091 0 132.654545-107.054545 239.709091-239.709091 239.709091-132.654545 0-239.709091-107.054545-239.709091-239.709091z' fill='%23999999' p-id='1241'%3E%3C/path%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
}
input{
padding:0 20px !important;
text-align: start !important;
}
屬性：
slot:
到此這篇關(guān)于Taro小程序自定義頂部導(dǎo)航欄的文章就介紹到這了,更多相關(guān)小程序自定義導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JS對(duì)img進(jìn)行操作(換圖片/切圖/輪換/停止)
JS對(duì)img進(jìn)行操作包括:換圖片/切圖/輪換/停止輪換等等，在本文將逐一實(shí)現(xiàn)，感興趣的朋友可以參考下哈，希望對(duì)你學(xué)習(xí)js知識(shí)有所幫助2013-04-04
由于uniapp暫無(wú)釘釘授權(quán)登錄所以本文將釘釘掃碼登錄作為網(wǎng)頁(yè)嵌入uniapp，最終實(shí)現(xiàn)釘釘掃碼登錄app，本文通過(guò)實(shí)例代碼給大家介紹uniapp釘釘掃碼登錄功能，感興趣的朋友一起看看吧2021-12-12
微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖效果
滑塊拼圖（Slider?Puzzle）是一種經(jīng)典的智力游戲,通常由一個(gè)3x3或更大的格子組成,其中一個(gè)格子為空,玩家通過(guò)滑動(dòng)拼圖塊來(lái)達(dá)到特定的圖案或順序,這篇文章主要介紹了微信小程序?qū)崿F(xiàn)的數(shù)字滑塊拼圖,需要的朋友可以參考下2024-08-08
淺談JavaScript 中有關(guān)時(shí)間對(duì)象的方法
下面小編就為大家?guī)?lái)一篇淺談JavaScript 中有關(guān)時(shí)間對(duì)象的方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
用js實(shí)現(xiàn)的自定義的對(duì)話框的實(shí)現(xiàn)代碼
javascript alert函數(shù)的替代方案，一個(gè)自定義的對(duì)話框的方法2010-03-03
javascript面向?qū)ο蟪绦蛟O(shè)計(jì)（一）
這篇文章主要介紹了javascript面向?qū)ο蟪绦蛟O(shè)計(jì)，分享給大家一段代碼，注釋里講解的非常詳細(xì)，有助于我們理解面向?qū)ο?，這里推薦給大家。2015-01-01
addRule在firefox下的兼容寫(xiě)法...2006-11-11
我們?cè)陧?xiàng)目經(jīng)常遇到獲取本機(jī)IP地址的需求,下面這篇文章主要給大家介紹了關(guān)于JS獲取本機(jī)IP地址的2種方法,文中通過(guò)示例代碼介紹的非常詳細(xì),本文適合新手,需要的朋友可以參考下2022-09-09
JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽(tīng)輸入框變化的實(shí)例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端實(shí)時(shí)監(jiān)聽(tīng)輸入框變化的解決方案,需要的朋友可以參考下2017-04-04
js判斷對(duì)象是否存在某個(gè)屬性的幾種辦法技巧
這篇文章主要給大家介紹了關(guān)于js判斷對(duì)象是否存在某個(gè)屬性的幾種辦法技巧,判斷對(duì)象中是否有某屬性的常見(jiàn)方式總結(jié),不同的場(chǎng)景要使用不同的方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12