Watching the original Bowen https://www.cnblogs.com/sese/p/9761713.html simple exercises.
1. In the window configuration app.json navigationStyle
2. Calculate the correlation value
1. The height of the entire navigation bar;
2. The distance from the top of the capsule button;
The capsule from the right side of the button.
Applet by () wx.getMenuButtonBoundingClientRect acquired button information and the capsule wx.getSystemInfo () Get Device Information
App.js code is as follows:
With this information we can calculate the above said three values:
1. The height of the entire navigation = statausBarHeight + height + (top-statausBarHeight) * 2;
2. Capsule button from the top = top;
The capsule with the button from the right = windowWidth - right.
3. The head assembly navBar
navBar.wxml
<view class="navbar" style="height:{{navHeight}}px;"> <view class="navbar_left" style="top:{{navTop}}px;" wx:if="{{showNav}}"> <view bind:click="navBack"><image src="/image/back.png"></image></view> <view class="nav_line" bind:click="navHome"><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
Components // / NavBar / navBar.js const getApp the App = (); the Component ({ Options: { addGlobalClass: to true, }, / ** * component attribute list * / Properties: { the pageName: String, // title intermediate showNav: { type: Boolean, value: to true }, ShowHome: { type: Boolean, value: to true } }, / ** * initial data component * / data: { }, Lifetimes: { attached: function () { the this .setData ({ navHeight: App.globalData.navHeight, navTop: App.globalData.navTop }) } }, / ** * The method of assembly list * / Methods: { // backoff unrealized navBack: function () { wx.navigateBack ({ Delta:. 1 }) }, // return Home unrealized navHome: function () { wx.navigateTo ({ URL: '/ Pages / index / index' }) }, } })
navBar.json
4.index in
index.json
index.wxml
Last renderings: