微信小程序 自定义导航栏
Posted 怂的一批的蜗牛
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序 自定义导航栏相关的知识,希望对你有一定的参考价值。
看着原博文https://www.cnblogs.com/sese/p/9761713.html简单的练习。
1.在app.json中 window配置navigationStyle
2.计算相关值
1. 整个导航栏的高度;
2. 胶囊按钮与顶部的距离;
3. 胶囊按钮与右侧的距离。
小程序可以通过 wx.getMenuButtonBoundingClientRect() 获取胶囊按钮的信息 和 wx.getSystemInfo() 获取设备信息
通过这些信息我们可以计算出上面说的3个值:
1. 整个导航栏高度 = statausBarHeight + height + (top-statausBarHeight )*2;
2. 胶囊按钮与顶部的距离 = top;
3.胶囊按钮与右侧的距离 = windowWidth - right。
App.js 代码如下:
3.头部组件navBar
navBar.wxml
<view class="navbar" style="height:{{navHeight}}px;"> <!-- 左上角 返回按钮 和 home按钮 wx:if="{{showNav}}" 是控制左上角按钮的显示隐藏,首页不显示 --> <view class="navbar_left" style="top:{{navTop}}px;" wx:if="{{showNav}}"> <!-- 控制返回按钮的显示 --> <view bindtap="navBack"><image src="/image/back.png"></image></view> <!-- home按钮 wx:if="{{showHome}}" 是控制左上角 home按钮的显示隐藏--> <view class="nav_line" bindtap="navHome" wx:if="{{showHome}}"><image src="/image/home.png"></image></view> </view> <!-- 中间标题 --> <view class="navbar_title" style="top:{{navTop}}px;">{{pageName}}</view> </view>
navBar.wxss
.navbar { width: 100%; overflow: hidden; position: relative; top: 0; left: 0; z-index: 10; flex-shrink: 0; background: #fff; } .navbar_left{ display: -webkit-flex; display: flex; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; position: absolute; left: 10px; z-index: 11; line-height: 1; padding: 3px; border:1rpx solid #f0f0f0; border-radius: 40rpx; overflow: hidden; background: rgba(255,255,255,0.6); } .navbar_left view{ width: 50rpx; height: 50rpx; margin-right: 10rpx; } .navbar_left view image{ width: 100%; height: 100%; } .nav_line{ border-left: 1rpx solid #f0f0f0; padding-left: 8px; } .navbar_title{ width: 100%; box-sizing: border-box; padding-left: 115px; padding-right: 115px; height: 32px; line-height: 32px; text-align: center; position: absolute; left: 0; z-index: 10; color: #333; font-size: 16px; font-weight: bold; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
navBar.js
const App = getApp(); Component({ /** * 组件的属性列表 */ properties: { pageName: String, //中间的title showNav: { //判断是否显示左上角的按钮 type: Boolean, value: true }, showHome: { //判断是否显示左上角的home按钮 type: Boolean, value: true } }, /** * 组件的初始数据 */ data: { showNav: true, //判断是否显示左上角的home按钮 showHome: true, //判断是否显示左上角的按钮 }, lifetimes: { // 生命周期函数,可以为函数,或一个在methods段中定义的方法名 attached: function () { this.setData({ navHeight: App.globalData.navHeight, navTop: App.globalData.navTop }) } }, /** * 组件的方法列表 */ methods: { //回退 navBack: function () { wx.navigateBack() }, //回主页 navHome: function () { wx.navigateTo({ url: \'/pages/home/home\' }) }, } })
navBar.json
4.index中
index.json
index.wxml
<view class="view-page"> <navbar page-name="你当前页面的名字" show-nav="{{showNav}}" show-home="{{showHome}}"></navbar> <view class=\'page-content\'> <!--这里放你的内容--> <navigator url="../demo1/demo1">跳转</navigator> </view> </view>
index.js
5.demo1中
demo1.wxml
demo.js
6.home页
home.wxml
home.js
最后效果图:
以上是关于微信小程序 自定义导航栏的主要内容,如果未能解决你的问题,请参考以下文章