微信小程序封装自定义导航栏
2023-12-15 06:16:55
- 在 app.json 文件中设置导航栏的样式:
"window": {
"navigationStyle": "custom"
},
"usingComponents": {
"nav-bar": "/components/navbar/navbar"
}
- 在app.js中获取设备顶部窗口的高度
App({
onLaunch: function (options) {
var _this = this;
//自定义导航栏 获取设备顶部窗口的高度(不同设备窗口高度不一样,根据这个来设置自定义导航栏的高度)
wx.getSystemInfo({
success: (res) => {
// 基础库 2.1.0 开始支持wx.getMenuButtonBoundingClientRect(),低版本需要适配
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组件
- 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 || "/assets/arrow.png"}}' mode='aspectFill'></image>
</view>
<!-- 中间的标题 -->
<view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if='{{navbarData.title&&!navbarData.titleHide}}'>{{navbarData.title}}</view>
<view class='nav-title nav-title-class' style='margin-top: {{statusBarHeight}}px; height: {{navBarHeight}}px;' wx:if="{{!navbarData.titleHide&&!navbarData.title}}"><image src="/assets/logo.png" alt="" class="nav-logo"/></view>
</view>
- js文件中
const app = getApp()
Component({
// multipleSlots 为组件开启多插槽模式
options: {
multipleSlots: true,
},
// 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: {
// 返回键,触发自定义事件,将返回的事件交给父级页面来分情况定义
_navback() {
this.triggerEvent('goBack')
}
}
})
- json文件
{
"usingComponents": {},
"component": true
}
- wxss文件
/* 顶部固定定位 标题要居中 自定义按钮和标题要和右边微信原生的胶囊上下对齐 */
.nav-wrap {
position: fixed;
width: 100%;
top: 0;
left: 0;
right: 0;
background: #F0F0F0;
z-index: 9999;
transform: translate3d(0, 0, 0);
}
/* 返回键 */
.nav-capsule {
width: 140rpx;
display: flex;
align-items: center;
position: absolute;
left: 20rpx;
top: 0;
bottom: 0;
margin: auto;
}
.back-pre {
width: 40rpx;
height: 40rpx;
}
/* 标题 */
.nav-title {
position: absolute;
left: 0;
right: 0;
bottom: 0;
max-width: 360rpx;
margin: auto;
display: flex;
align-items: center;
justify-content: space-around;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: #45494D;
font-size: 24rpx;
font-weight: 600;
}
.nav-title .nav-logo {
width: 99rpx;
height: 41rpx;
}
- 页面引用
- wxml文件
<view>
<nav-bar bind:goBack="_goBack" navbar-data='{{nvabarData}}'></nav-bar>
</view>
- js文件
import {
request
} from '../../utils/request'
const app = getApp()
let pageIndex = 1
Page({
/**
* 页面的初始数据
*/
data: {
nvabarData: {
showCapsule: 1,//是否显示左上角图标 1表示显示 0表示不显示
title: '首页',
backSrc:'' //如果传入左上角使用传入的图片否则使用返回图标
},
},
_goBack() {
let pages = getCurrentPages(); //获取当前页面pages里的所有信息。
console.log(pages, "pages")
let prevPage = pages[pages.length - 2]; //prevPage 是获取上一个页面的js里面的pages的所有信息。 -2 是上一个页面,-3是上上个页面以此类推。
prevPage.setData({ // 将我们想要传递的参数在这里直接setData。上个页面就会执行这里的操作。
chooseValue: this.data.chooseValue
})
//上一个页面内执行setData操作,将我们想要的信息保存住。当我们返回去的时候,页面已经处理完毕。
//最后就是返回上一个页面。
wx.navigateBack({
delta: 1 // 返回上一级页面。
})
}
}
文章来源:https://blog.csdn.net/weixin_46328739/article/details/134977170
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!