微信小程序自定義導(dǎo)航的方法
更新時間：2022年08月28日 15:18:33 作者：沐笙959
這篇文章主要為大家詳細(xì)介紹了微信小程序自定義導(dǎo)航的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了微信小程序自定義導(dǎo)航的具體代碼，供大家參考，具體內(nèi)容如下
在app.js中獲取狀態(tài)欄信息和膠囊按鈕信息
onLaunch() {
? ? // 展示本地存儲能力
? ? const logs = wx.getStorageSync('logs') || []
? ? logs.unshift(Date.now())
? ? wx.setStorageSync('logs', logs)
? ? // 獲取系統(tǒng)信息
?? ?this.globalData.systemInfo = wx.getSystemInfoSync();
?? ?// 獲取狀態(tài)欄高度
?? ?this.globalData.statusBarHeight = this.globalData.systemInfo.statusBarHeight
?? ?// 膠囊按鈕位置信息
?? ?this.globalData.menuButtonInfo = wx.getMenuButtonBoundingClientRect();
?? ?// 獲取導(dǎo)航欄高度
?? ?this.globalData.navBarHeight = this.globalData.menuButtonInfo.bottom + (this.globalData.menuButtonInfo.top - this.globalData.statusBarHeight)
},globalData: {
? ? statusBarHeight: '',
? ? menuButtonInfo: {},
? ? navBarHeight:'',
? ? systemInfo:''
? },導(dǎo)航欄高度為膠囊底部位置+（膠囊頂部位置-狀態(tài)欄高度）
將導(dǎo)航欄封裝成組件
navigation-bar.js
properties: {
?? ?// 是否顯示返回箭頭
? ? showBackArrow: {
? ? ? ? type: Boolean,
? ? ? ? value: true
? ? },
? ? // 是否自定義導(dǎo)航欄標(biāo)題
? ? customTitle: {
? ? ? ? type: Boolean,
? ? ? ? value: false
? ? },
? ? // 導(dǎo)航欄標(biāo)題
? ? title: {
? ? ? ? type: String,
? ? ? ? value: 'weixin'
? ? },
? ? // 是否自定義返回方法
? ? customBack: {
? ? ? ? type: Boolean,
? ? ? ? value: false
? ? }
},
data: {
?? ?navBarHeight:getApp().globalData.navBarHeight,
? ? statusBarHeight:getApp().globalData.statusBarHeight,
? ? menuButtonInfo:getApp().globalData.menuButtonInfo
},
methods: {
? ? /** ?點(diǎn)擊返回按鈕 */
? ? back() {
? ? ? ? if (this.data.customBack) {
? ? ? ? ? ? this.triggerEvent('back')
? ? ? ? } else {
? ? ? ? ? ? wx.navigateBack({
? ? ? ? ? ? ? ? delta: 0,
? ? ? ? ? ? })
? ? ? ? }
? ? },
? ? /** 點(diǎn)擊導(dǎo)航欄標(biāo)題事件 */
? ? clickTitle(){
? ? ? ? this.triggerEvent('clickTitle')
? ? },
}navigation-bar.wxml
<view class="nav-bar" style="height:{{navBarHeight}}px;">
? ? <view style="height:{{statusBarHeight}}px;"></view>
? ? <view style="height:{{navBarHeight-statusBarHeight}}px;width:{{menuButtonInfo.left}}px;" class="nav-box">
? ? ? ? <view class="back-arrow" wx:if="{{showBackArrow}}">
? ? ? ? ? ? <van-icon name="arrow-left" color="#262626" size="40rpx" bindtap="back"></van-icon>
? ? ? ? </view>
? ? ? ? <view class="nav-title" style="width: {{showBackArrow?'calc(100% - 40rpx)':'100%'}};">
? ? ? ? ? ? <text wx:if="{{!customTitle}}" bindtap="clickTitle">{{title}}</text>
? ? ? ? ? ? <slot wx:if="{{customTitle}}"></slot>
? ? ? ? </view>
? ? </view>
</view>
<view style="height:{{navBarHeight}}px;"></view>navigation-bar.wxss
.nav-bar{
? ? width: 100%;
? ? position: fixed;
? ? top: 0;
? ? left: 0;
? ? background-color: #ffffff;
? ? z-index: 1000000;
}
.nav-box{
? ? padding: 0 20rpx;
? ? display: flex;
? ? align-items: center;
}
.back-arrow{
? ? width: 60rpx;
? ? height: 100%;
? ? display: flex;
? ? align-items: center;
? ? padding-top: 4rpx;
}
.nav-title{
? ? height: 100%;
? ? display: flex;
? ? align-items: center;
? ? font-size: 36rpx;
? ? color: #262626;
? ? font-weight: 600;
}使用
app.js
"window": {
? ? ? ? "navigationStyle": "custom"
? ? },
? ? "usingComponents": {
? ? ? ? "navigation-bar":"/components/navigation-bar/navigation-bar",
? ? }.wxml
<navigation-bar title="打卡" customBack bind:back="backWorkPage"></navigation-bar>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 微信小程序自定義頭部導(dǎo)航欄和導(dǎo)航欄背景圖片 navigationStyle問題
- 詳解微信小程序膠囊按鈕返回|首頁自定義導(dǎo)航欄功能
- 微信小程序自定義導(dǎo)航隱藏和顯示功能
- 微信小程序自定義navigationBar頂部導(dǎo)航欄適配所有機(jī)型（附完整案例）
- 微信小程序自定義頭部導(dǎo)航欄(組件化)
- uniapp微信小程序底部動態(tài)tabBar的解決方案(自定義tabBar導(dǎo)航)
- 微信小程序自定義底部導(dǎo)航帶跳轉(zhuǎn)功能
- 微信小程序自定義導(dǎo)航欄實(shí)例代碼
- 微信小程序?qū)崿F(xiàn)自定義導(dǎo)航欄
- 微信小程序系列之自定義頂部導(dǎo)航功能
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js仿淘寶放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
關(guān)閉頁面時window.location事件未執(zhí)行的原因分析及解決方案
最近在做一個項(xiàng)目的時候，遇到個問題，就是關(guān)閉頁面時window.location事件未執(zhí)行，百思不得其解，度娘上搜了一下才知道具體原因，記錄一下2014-09-09
Javascript 顏色漸變效果的實(shí)現(xiàn)代碼
在搭建博主博客的時候，尋思著做一些效果，看到菜單，就想是不是可以做一下顏色的漸變，增加一點(diǎn)動態(tài)的感覺。有個jquery的插件，效果相當(dāng)不錯，不過博主還是打算自立更生寫一下，看看能不能實(shí)現(xiàn)2013-10-10
平時JavaScript逆向需要補(bǔ)環(huán)境或者補(bǔ)一些函數(shù),下面這篇文章主要給大家介紹了關(guān)于JS逆向之瀏覽器補(bǔ)環(huán)境的相關(guān)資料,文中通過圖文以及實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-03-03
ECharts餅圖顏色設(shè)置的4種方式總結(jié)
這篇文章主要給大家介紹了關(guān)于ECharts餅圖顏色設(shè)置的4種方式,ECharts餅圖的顏色可以通過多種方式進(jìn)行設(shè)置,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-09-09
JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏
這篇文章主要介紹了JavaScript實(shí)現(xiàn)下拉菜單的顯示和隱藏的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-01-01
2022發(fā)布ECMAScript新特性盤點(diǎn)
這篇文章主要為大家介紹了2022發(fā)布ECMAScript新特性盤點(diǎn)，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
這篇文章主要介紹了JSONP原理及應(yīng)用實(shí)例詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
有時我們會有這樣的需求：讓圖片顯示在固定大小的區(qū)域。如果不考慮 IE6 完全可以使用 css 的 max-width 限制寬度自動按比例縮小顯示，但是這樣有個問題，就是如果按比例縮小后，圖片高度不夠，那么就很難看了2014-07-07
關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些
代碼規(guī)范并不是一種編寫正確JavaScript代碼的規(guī)則，而是為了保持源代碼編寫模式一致的一種選擇。這篇文章給大家介紹了關(guān)于Google發(fā)布的JavaScript代碼規(guī)范你要知道哪些，感興趣的朋友一起看看吧2018-04-04