微信小程序实现自定义导航栏
作者:Upward Force
这篇文章主要为大家详细介绍了微信小程序实现自定义导航栏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了微信小程序自定义导航栏的具体代码,供大家参考,具体内容如下
1、要实现自定义导航栏,首先得在全局进行相关配置
app.json页面
"window": { ... "navigationStyle": "custom" },
根据微信小程序官方文档的说法,只有客户端7.0.0以上版本才支持局部页面实现自定义导航栏,7.0.0以下版本只支持全体页面的自定义导航栏,自己项目里采用的是就是这种
app.js页面
App({ onLaunch: function(options) { var _this = this; //自定义导航栏 获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度) wx.getSystemInfo({ success: (res) => { // 基础库 2.1.0 开始支持wx.getMenuButtonBoundingClientRect(),低版本需要适配 let custom = wx.getMenuButtonBoundingClientRect() // console.log('状态栏高度',res.statusBarHeight) // console.log('右上角胶囊按钮的高度', custom.height) // console.log('右上角胶囊按钮的上边界坐标', custom.top) // console.log('右上角胶囊按钮的下边界坐标', custom.bottom) _this.globalData.statusBarHeight = res.statusBarHeight _this.globalData.navBarHeight = custom.height + (custom.top - res.statusBarHeight) * 2 } }) }, globalData: { // 全局数据 statusBarHeight: 0, navBarHeight: 0, }, })
2、创建自定义导航栏组件,组件目录为 /components/navbar
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='{{navbarData.backSrc || "/img/back4.png"}}' mode='aspectFill'></image> </view> <!-- 中间的标题 --> <view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;'>{{navbarData.title}}</view> </view>
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 由父页面传递的数据,变量名字自命名 type: Object, value: {}, observer: function (newVal, oldVal) { } }, }, // 组件用来储存内部私有数据 data: { // 自定义导航栏的高度 statusBarHeight: app.globalData.statusBarHeight, navBarHeight: app.globalData.navBarHeight }, // attached函数 当组件进入页面节点树时触发,可以使用setData,绝大多数初始化工作在这个时机进行 attached: function () {}, // methods对象 定义组件内的各种方法 methods: { // 返回键,触发自定义事件,将返回的事件交给父级页面来分情况定义 _navback() { this.triggerEvent('goBack') } } })
navbar.json页面
{ "component": true }
navbar.wxss页面
/* 顶部固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */ .nav-wrap { position: fixed; width: 750rpx; top: 0; left: 0; right: 0; background: #f4f4f4; /* background-color: pink; */ z-index: 9999999; transform: translate3d(0, 0, 0); } /* 返回键 */ .nav-capsule { width: 140rpx; /* background-color: skyblue; */ /* 让里面的图片元素垂直居中 */ display: flex; align-items: center; } .back-pre { width: 100rpx; height: 68rpx; /* background-color: green; */ } /* 标题 */ .nav-title { position: absolute; left: 0; right: 0; bottom: 0; max-width: 400rpx; margin: auto; /* background-color: deeppink; */ /* 水平垂直居中 */ display: flex; align-items: center; justify-content: space-around; /* 超出部分省略号显示 */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* 字体设置 */ color: #111111; font-size: 32rpx; font-weight: 500; }
3、在其它页面使用自定义导航栏组件(需要修改默认样式)
transation_detail.json页面
{ "usingComponents": { "nav-bar": "/components/navbar/navbar", } }
transation_detail.wxml页面
<!-- 引入自定义导航栏组件 --> <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'> </nav-bar>
transation_detail.wxss页面
/* 需要从外部传入导航栏组件的样式 */ /* 导航栏背景色 */ .ex-nav-bgc-class { background: transparent !important; } /* 导航栏标题颜色 */ .ex-nav-title-class { color: #fff !important; } /* 导航栏返回键样式 */ .ex-back-pre { width: 60rpx!important; height: 60rpx!important; margin-top: 4rpx!important; padding: 40rpx!important; }
transation_detail.js页面
const app = getApp() Page({ /** * 页面的初始数据 */ data: { // 自定义导航栏需要的参数 nvabarData: { showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示 title: '', //导航栏 中间的标题 backSrc: '/img/back3.png' // 返回键的样式 }, // 此页面 页面内容距最顶部的距离 height: app.globalData.statusBarHeight + app.globalData.navBarHeight, }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) {}, // 点击 顶部返回键时 要返回的页面 _goBack() { wx.switchTab({ url: '/pages/mer_index/mer_index', }) }, })
4、自定义导航栏可以不传样式,这时会采用默认样式
order.wxml页面
<!-- 引入自定义导航栏组件 --> <nav-bar bind:goBack="_goBack" navbar-data='{{nvabarData}}'></nav-bar>
order.js页面
const app = getApp() Page({ /** * 页面的初始数据 */ data: { // 自定义导航栏需要的参数 nvabarData: { showCapsule: 1, //是否显示左上角图标 1表示显示 0表示不显示 title: '现有仓单', //导航栏 中间的标题 }, // 此页面 页面内容距最顶部的距离 height: app.globalData.statusBarHeight + app.globalData.navBarHeight,
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。