微信小程序自定義導航欄效果
更新時間：2022年05月23日 11:04:10 作者：XJ_18335388352
這篇文章主要為大家詳細介紹了微信小程序自定義導航欄效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序自定義導航欄的具體代碼，供大家參考，具體內容如下
第一步 添加屬性 “navigationStyle”: “custom”
全局： app.json中添加屬性 “navigationStyle”: “custom”
"window": {
? ? "backgroundTextStyle": "light",
? ? "navigationBarBackgroundColor": "#fff",
? ? "navigationBarTitleText": "WeChat",
? ? "navigationBarTextStyle": "black",
? ? "navigationStyle": "custom"
? },局部： 單個文件index.json中添加屬性 “navigationStyle”: “custom”
{
? "navigationBarTitleText": "我的",
? "navigationBarTextStyle": "white",
? "navigationStyle": "custom",
? "usingComponents": {}
}第二步 自定義導航欄
獲取設備頂部窗口的高度（不同設備窗口高度不一樣，根據這個來設置自定義導航欄的高度）
app.js
// app.js
App({
? onLaunch() {
? ? //自定義導航欄 獲取設備頂部窗口的高度（不同設備窗口高度不一樣，根據這個來設置自定義導航欄的高度）
? ? wx.getSystemInfo({
? ? ? success: (res) => {
? ? ? ? let custom = wx.getMenuButtonBoundingClientRect()
? ? ? ? this.globalData.statusBarHeight = res.statusBarHeight
? ? ? ? this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2
? ? ? }
? ? })
? },
? globalData: {
? ? statusBarHeight: 0,
? ? navBarHeight: 0,
? }
})第三步 自定義組件
navbar.js
const app = getApp()
Component({
? // multipleSlots 為組件開啟多插槽模式
? options: {
? ? multipleSlots: true,
? },
? // externalClasses 為組件指定多個外部樣式類
? externalClasses: ['nav-bgc-class', 'nav-title-class', 'ex-back-pre'],
? // properties 組件用來儲存外部數據
? properties: {
? ? navbarData: { //navbarData ? 由父頁面?zhèn)鬟f的數據，變量名字自命名
? ? ? type: Object,
? ? ? value: {},
? ? ? observer: function (newVal, oldVal) { }
? ? },
? },
? // 組件用來儲存內部私有數據
? data: {
? ? // 自定義導航欄的高度
? ? statusBarHeight: app.globalData.statusBarHeight,
? ? navBarHeight: app.globalData.navBarHeight,
? },
? // attached函數 當組件進入頁面節(jié)點樹時觸發(fā)，可以使用setData，絕大多數初始化工作在這個時機進行
? attached: function () { },
? // methods對象 定義組件內的各種方法
? methods: {
? ? // 返回鍵，觸發(fā)自定義事件，將返回的事件交給父級頁面來分情況定義
? ? _navback() {
? ? ? // this.triggerEvent('goBack')
? ? ? wx.navigateBack()
? ? }
? }
})navbar.json
{
? "usingComponents": {},
? "component": true
}navbar.wxml
<!-- 默認為黑色的返回鍵-->
<view class="nav-wrap nav-bgc-class" style='height: {{statusBarHeight + navBarHeight}}px;'>
? <!-- ?左上角的返回按鈕 其中wx:if='{{navbarData.showCapsule}}' 是控制左上角按鈕的顯示隱藏，1為顯示，0為隱藏 -->
? <view class='nav-capsule' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.showCapsule}}' bindtap='_navback'>
? ? <image class='back-pre ex-back-pre' src='back.png' mode='aspectFill'></image>
? </view>
? ? <!-- ?中間的標題 -->
? <view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;line-height: {{navBarHeight}}px;'>{{navbarData.title}}</view>
</view>navbar.wxss
/* 頂部固定定位 ? 標題要居中 ? 自定義按鈕和標題要和右邊微信原生的膠囊上下對齊 */
.nav-wrap {
? position: fixed;
? width: 750rpx;
? top: 0;
? left: 0;
? right: 0;
? background: #fff;
? z-index: 9999999;
? transform: translate3d(0, 0, 0);
}
/* 返回鍵 */
.nav-capsule {
? width: 140rpx;
? /* background-color: skyblue; */
? /* 讓里面的圖片元素垂直居中 */
? display: flex;
? align-items: center;
? margin-left: 30rpx;
}
.back-pre {
? width: 32rpx;
? height: 36rpx;
}
/* 標題 */
.nav-title {
? position: absolute;
? left: 0;
? right: 0;
? bottom: 0;
? width: 300rpx;
? margin: auto;
? /* 水平垂直居中 */
? /* display: flex; */
? align-items: center;
? justify-content: space-around;
? /* 超出部分省略號顯示 */
? overflow: hidden;
? text-overflow: ellipsis;
? white-space: nowrap;
? /* 字體設置 */
? font-family: PingFangSC-Medium;
? font-size: 32rpx;
? color: #000000;
? letter-spacing: 0;
? text-align: center;
}第四步 使用組件
新建一個文件夾mine
mine.js
const app = getApp()
Page({
? /**
? ?* 頁面的初始數據
? ?*/
? data: {
? ? nvabarData: {
? ? ? showCapsule: 0, //是否顯示左上角圖標 ? 1表示顯示 ? ?0表示不顯示
? ? ? title: '我的', //導航欄 中間的標題
? ? },
? ? height: app.globalData.statusBarHeight + app.globalData.navBarHeight,
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ??
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面初次渲染完成
? ?*/
? onReady: function () {
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面顯示
? ?*/
? onShow: function () {
? ? var userInfo = wx.getStorageSync('userInfo')
? ? if (userInfo) {
? ? ? this.setData({
? ? ? ? userInfo: userInfo,
? ? ? ? hasUserInfo: true
? ? ? })
? ? }
? ? var phoneNumber = wx.getStorageSync('phoneNumber')
? ? if (phoneNumber) {
? ? ? this.setData({
? ? ? ? phoneNumber: phoneNumber,
? ? ? })
? ? }
? ? var loginInfo = wx.getStorageSync('loginInfo')
? ? if (loginInfo) {
? ? ? this.setData({
? ? ? ? loginInfo: loginInfo
? ? ? })
? ? }
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面隱藏
? ?*/
? onHide: function () {
? },
? /**
? ?* 生命周期函數--監(jiān)聽頁面卸載
? ?*/
? onUnload: function () {
? },
? /**
? ?* 頁面相關事件處理函數--監(jiān)聽用戶下拉動作
? ?*/
? onPullDownRefresh: function () {
? },
? /**
? ?* 頁面上拉觸底事件的處理函數
? ?*/
? onReachBottom: function () {
? },
? /**
? ?* 用戶點擊右上角分享
? ?*/
? onShareAppMessage: function () {
? }
})mine.json
{
? "navigationStyle": "custom",
? "usingComponents": {
? ?? ?"nav-bar": "/components/navbar/navbar",
? }
}mine.wxml
<!-- navbar頭部 -->
<nav-bar navbar-data='{{nvabarData}}'></nav-bar>
<view style='margin-top: {{height}}px;'>
? 內容
</view>第五步 看效果
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
ProgressBar.js 是一個借助動態(tài) SVG 路徑的漂亮的，響應式的進度條效果。使用 ProgressBar.js 可以很容易地創(chuàng)建任意形狀的進度條。這個 JavaScript 庫提供線條，圓形和方形等幾個內置的形狀，但你可使用 Illustrator 或任何其它的矢量圖形編輯器創(chuàng)建自己的進度條效果。2015-04-04
這篇文章主要介紹了JS碰撞運動實現方法,詳細分析了碰撞運動的原理及相應的javascript實現技巧,需要的朋友可以參考下2016-12-12
JavaScript 對象模型-執(zhí)行模型分析2009-12-12
本文主要分享了原生js實現無縫輪播圖效果的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-01-01
js關閉瀏覽器窗口，不彈出提示框。支持ie6+，火狐，谷歌等瀏覽器，下面以一個示例為大家詳細介紹下具體的實現方法，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了微信小程序內拖動圖片實現移動、放大、旋轉的方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-09-09
所謂事件委托，就是將原本應該在當前元素綁定的事件，放到它的祖先元素上，讓祖先元素來委托處理。今天我們來認識一下JS中的事件委托2022-07-07
Javascript實現關聯數據(Linked Data)查詢及注意細節(jié)
DBpedia對Wikipedia的數據變成Linked Data形式，使得機器也能讀懂并自由獲得這些數據;本文的主要目的是利用Javascript從DBpedia中獲取我們想要的數據,感興趣的朋友可以參考下，希望可以幫助到你2013-02-02
本文介紹了利用Array.prototype.sort方法和Math.random()實現快速打亂數組的方法，大家參考使用吧2014-01-01
javascript匿名函數中的''return function()''作用
這篇文章主要介紹了javascript匿名函數中的'return function()'作用介紹,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-10-10