The original address: www.ctoku.com/post/XqArOn…

In small programs in the process of development, a problem is often encountered by friends share open a small program, go to the home page of the entrance is too deep, result in some loss of users, and specialized processing was carried out on the back button and the return address, need to return to the specified location, you can through the custom processing.

Configuration:

Customize headers for pages or global pages by configuring navigationStyle

Train of thought

First we specify that the custom header must exist as a component; When we customize, we need to keep the same position of the capsule on the right, and also keep the page title. The effect we achieve is as shown in the picture below:

implementation

First we go through

Wx. GetMenuButtonBoundingClientRect capsule () to obtain the right position using wx. GetSystemInfo information acquisition system The two groups of data is not often change so we entered the small program execution on the global variables.

Enclosing globalData. HeaderBtnPosi = wx. GetMenuButtonBoundingClientRect () wx. GetSystemInfo ({/ / at the bottom of the iphonex success: res => { that.globalData.systeminfo = res } })Copy the code

According to the following figure

Our custom icon corresponds to the position of the right capsule so we use the position of the right capsule to locate the position of the left custom icon which we originally obtained

HeaderPosi: {bottom: 82 height: 32 left: 278 right: 365 top: 50 width: 87}Copy the code

The height of the status bar is statusH = 44

Therefore, the height of the user-defined capsule from the top is the height of the capsule from the status bar – the status bar height

Customnav. top = Headerposi. top-statush WXML section

<view class="custom_nav" style="height:{{navbarHeight}}px;" > <view class="custom_nav_box" style="height:{{navbarHeight}}px;" > <view class="custom_nav_bar" style="top:{{statusBarHeight}}px; height:{{cusnavH}}px;" > <view class="custom_nav_icon" wx:if="{{! navbarData.has_search}}" style="height:{{navbarBtn.height - 2}}px; top:{{navbarBtn.top}}px; left:{{navbarBtn.right}}px; border-radius: {{navbarBtn.height / 2}}px"> <view class="gobank" style="height:{{navbarBtn.height - 10}}px; width:{{navbarBtn.height - 10}}px;" ></view> <view class="home" style="height:{{navbarBtn.height -10 }}px; width:{{navbarBtn.height - 10}}px;" ></view> </view> <view class="nav_title" wx:if="{{! navbarData.has_search}}" style="height:{{cusnavH}}px; line-height:{{cusnavH}}px;" </view> </view> </view>Copy the code

WXSS part

.custom_nav {
  width: 100%;
  background: #fff;
}

.custom_nav_box {
  position: fixed;
  width: 100%;
  background: #fff;
}
.custom_nav_bar{
  position: relative;
}
.custom_nav_box .nav_title {
  font-size: 34rpx;
  color: #000;
  text-align: center;
  position: absolute;
  max-width: 360rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  font-weight: 600;
}

.custom_nav_box .custom_nav_icon {
  position: absolute;
  border: .5rpx solid rgba(0, 0, 0, .1);
  border-radius: 50%;
  display: flex;
  padding: 0 10rpx
}
.custom_nav_icon .gobank {
  background: url('https://www.easyicon.net/api/resizeApi.php?id=1225467&size=128') no-repeat center center;
  background-size: 60%;
  padding:0 5px;
  margin: 4px 0;
}
.custom_nav_icon .home {
  background: url('https://www.easyicon.net/api/resizeApi.php?id=1223065&size=128') no-repeat center center;
  background-size: 60%;
  padding:0 5px;
  margin: 4px 0;
  border-left: 1px solid rgba(0, 0, 0, .1)
}
Copy the code

Js part

const app = getApp(); Component({properties: {navbarData: {// navbarData data passed by the parent page Type: Object, value: {goBank: true, goHome: true, has_search: false, }, observer: function (newVal, oldVal) { } } }, data: { haveBack: StatusBarHeight: 0, // statusBarHeight: 0, // top navigation bar height: navbarBtn: }, cusnavH: 0, searchW: 0, searchW: 0 0, / / search box width}, / / WeChat support wx 7.0.0. GetMenuButtonBoundingClientRect capsule button () to be highly attached: Function () {let statusBarHeight = app. GlobalData. Systeminfo. StatusBarHeight / / status bar height let headerPosi = App. GlobalData. HeaderBtnPosi / / capsule position information to the console. The log (statusBarHeight) console. The log (headerPosi) let btnPosi = {/ / capsule actual position, Height: headerposi.width: headerposi.width, top: HeaderPosi. Top-statusbarheight, // headerPosi.bottom - headerPosi.height - statusBarHeight, // capsule bottom - capsule height - status bar height (capsule bottom is the length from the bottom of the navigation bar) right: App. GlobalData. Systeminfo. ScreenWidth - headerPosi. Right/right/screen width - capsule} let haveBack; If (getCurrentPages().length === 1) {if (getCurrentPages().length === 1) {if (getCurrentPages().length === 1) { } else { haveBack = true; } var cusnavH = btnposi.height + btnposi.top + btnposi.bottom app.globalData.systeminfo.screenWidth - headerPosi.width - btnPosi.right * 2 - 30 console.log(searchW, app.globalData.systeminfo.screenWidth, headerPosi.width) this.setData({ haveBack: StatusBarHeight: statusBarHeight, navbarHeight: Headerposi.bottom + btnposi.bottom, // capsule bottom + capsule actual bottom navbarBtn: btnPosi, cusnavH: cusnavH, searchW: searchW }) }, methods: { _goBack: function () { wx.navigateBack({ delta: 1 }); }, _goHome: function () { wx.navigateTo({ url: '/pages/index/index', }); }}})Copy the code

use

Introduce this component in pages that require customization

NavbarData controls operations such as display and return buttons