Global Toolbar | Weixin public doc

Start from base library version 3.3.1. Please remaining backward compatible.

Components that can be rendered across pages, using scenes such as the bottom of the music app.When successiveSkylinepage transitions, the component instance is the same, so the state can be synchronized and the rendering level is above the page (and above the customtabbar).

When jumping between thewebviewrendering and theSkylinerendering, there are the following restrictions:

App-barComponent only supportsSkylineRender, theSkyline]] page appears from thewebview]] page, and the page disappears when you return to the`webView]] page.
A continuousSkylinepage-to-page jump, andapp-barcomponents are the same instance separated bywebview, then different instances, the state is not synchronized.
FromSkylineReturn towebviewpage and go toSkyline,app-barComponent instances are rebuilt and state is not synchronized.

# sample code

Developer tools need to be upgraded toNightly``1.06.2401052,Base library selection3.3.1

# Example-1 Mixing Scene

Preview with Developer Tool

# Use Procedure

# 1. Configuration information

Add theappBaroption toapagejson.

Examples:

{
  "appBar": {}
}

# 2. Add appBar code file

Add an entry file to the root directory, taking care not to change the file name. The app-barcomponent is not declared as a virtualized node.virtualHost: true。

app-bar/index.js
app-bar/index.json
app-bar/index.wxml
app-bar/index.wxss

# 3. Writing appBar code

You can write it as a custom component that takes over the rendering of the appBar entirely.In addition, the custom component adds thegetAppBarinterface to get an instance of the appBar component under the current page.

# 1. Responding to an incident

To prevent page occlusion,app-barcomponent root node addspointer-events: none;, when nodes in the component respond to clicks, addpointer-events: auto;。

<view class="tool-bar"></view>

.tool-bar {
  pointer-events: auto;
  position: absolute;
}

# 2. Get a component instance

Page({
  getInstance() {
    if (typeof this.getAppBar === 'function' ) {
      const appBarComp = this.getAppBar()
      appBarComp.setData({})
    }
  }
})

# Global Toolbar