今天小编给大家分享一下微信小程序怎么实现自定义导航栏的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
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: '现有仓单', //导航栏 中间的标题
},
// 此页面 页面内容距最顶部的距离
以上就是“微信小程序怎么实现自定义导航栏”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注亿速云行业资讯频道。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。