Recently, there was a requirement for webView to embed the active page in the wechat applet project. I found that the wechat applet could not configure the navigation bar, but could only use custom components to simulate the navigation bar, so I planned to write one myself.

Configure the custom navigation

First, paste the official document

Developers.weixin.qq.com/miniprogram…

{
  "component": true."usingComponents": {
    "navbar": "/components/navbar/navbar"}}Copy the code

NavigationStyle = custom navigationStyle = custom

Once set, the content starts at the top

Next use the custom component Navbar to implement the top style and return with the home page capsule

Custom Components

First analyze the navigation bar layout:

  • Top status bar
  • Main Content area
    • capsule
    • title

After the layout analysis, the next step is code implementation

wxml

<! -- index.wxml -->
<navbar header="{{header}}"></navbar>
<view class="intro">The project content</view>

<! -- navbar -->
<view style="height:{{statusHeight+navHeight}}px"></view>
<view class='topbar' style="background:{{header.headerbg}}">
  <view class='status' style="height:{{statusHeight}}px"></view>
  <view class='navbar' style="height:{{navHeight}}px">
      <view class='navbar_home' style="background:{{header.capsulebg}}; border:{{header.capsuleborder}}">
        <text class="iconfont iconback" wx:if="{{header.backCapsule}}" bindtap='backClick'></text>
        <text class="iconfont iconhome" wx:if="{{header.homeCapsule}}" bindtap='homeClick'></text>
      </view>
      <view class='navbar_title' style="height:{{navHeight}}px">
        <view style="color:{{header.fontColor}}; font-size:{{header.fontSize}}">{{header.title}}</view>
      </view>
  </view>
</view>
Copy the code

Topbar is the outermost view that provides dynamically configured background colors

Status is the status bar at the top, and the height of different models is uncertain, so this height is also dynamic

Navbar is the entire custom area, and the different models are also highly uncertain, so variables are also used

Navbar_home below navbar shows custom capsules; Also need to provide the background color can be customized, the capsule provides two buttons, a back button and a home, icon uses iconFONT

Navbar_title is used to show the title, in this case vertically centered, providing the configuration color and size

The entire navigation needs to be fixed at the top at all times, so use fixed positioning, and the topmost div is used as a placeholder

wxss

.topbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
}
.status {
  width: 100%;
}
.navbar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  position: relative;
}

.navbar_home {
  position: absolute;
  left: 32rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 33rpx;
  border: 1px solid rgba(0.0.0.0.1);
  background: rgba(0.0.0.0.2);
  box-sizing: border-box;
  padding: 10rpx 0;
}

.navbar_home .iconfont {
  padding: 0 20rpx;
}

.navbar_home .iconfont:nth-child(2) {
  border-left: 1px solid # 333;
  opacity: 0.7;
}

.navbar_title {
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
}
.navbar_title view {
  width: 40%;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 38rpx;
}

Copy the code

js

Logic handling: mainly height calculation, with two button click events

Height calculation:

The API wx.getSystemInfo is provided through the applets to dynamically obtain the height and model

StatusBarHeight Height of the status bar, in px

Res. system is used to determine ios or Android. If it is ios, the navigation bar is 44px and Android is 48px

Capsule incident:

Click the home button to return directly to the home page using wx.switchTab

Check the call stack with getCurrentPages and return to the home page if it is empty

Component({
  properties: {
    header: {
      type: Object.value: {
        homeCapsule: true.// Whether to display the home page
        backCapsule: true.// Whether to display returns
        headerbg: "#fff".// Background color
        title: ""./ / title
        fontColor: "# 000".// Font color
        fontSize: '16'.// Title font size
        capsulebg: 'rgba (0,0,0,0.2)'.// Capsule style
        capsuleborder: '1px solid rgba(0, 0, 0, 0.1)'.capsulesep: '1px solid rgba(255,255,255,0.2)'}}},options: {
    styleIsolation: 'apply-shared',},methods: {
    backClick() {
      if (getCurrentPages().length == 1) {
        this.homeClick()
      } else {
        wx.navigateBack({
          delta: 1})}},homeClick() {
      wx.switchTab({
        url: '/pages/homepage/homepage',}}}),attached() {
    var self = this;
    wx.getSystemInfo({
      success(res) {
        var isIos = res.system.indexOf('iOS') > -1;
        self.setData({
          statusHeight: res.statusBarHeight,
          navHeight: isIos ? 44 : 48})}})Copy the code

Renderings after completion

Because the Navbar component is a generic component, it is configured in app.json and the complete code snippet is provided at the end

Custom applets navigation

conclusion

  • Use the “navigationStyle”: “custom” configuration item to make navigation configurable
  • Use custom components to dynamically configure required functionality and styles
  • Compatibility issues are resolved through the Wx.getSystemInfo API