As shown, we implement a layout component like header+main+footer, using less for styling purposes

The project structure is as follows:

. ├ ─ ─ app. Js ├ ─ ─ app. Json ├ ─ ─ app. WXSS ├ ─ ─ components │ └ ─ ─ layout / / layout components │ └ ─ ─ the main - layout │ ├ ─ ─ the main - layout. Js │ ├ ─ ─ The main - layout. Json │ ├ ─ ─ the main - layout. Less │ ├ ─ ─ the main - layout. WXML │ └ ─ ─ the main - layout. WXSS ├ ─ ─ pages │ └ ─ ─ layout - test │ ├ ─ ─ ├─ Layout-test.js │ ├─ Layout-test.js │ ├─ Layout-test.js │ ├─ Layout-test.js │ ├─ Layout-test.js │ ├─ Layout-test.wxml │ ├─ layout-test.wxSS │ ─ Project. Config. Json ├ ─ ─ project. Private. Config. The json └ ─ ─ a sitemap. JsonCopy the code

Components /layout/main-layout/main-layout. WXML layout code is as follows

<view class="layout__">
  <! -- header -->
  <view class="layout__header" style="padding-top: {{statusBarHeight}}px">
    <view class="layout__header-wrapper">
      <slot name="header"></slot>
    </view>
  </view>
  
  <! -- main -->
  <view class="layout__main" style="padding-top: {{statusBarHeight + 46}}px">
    <slot name="main"></slot>
  </view>
  
  <! -- footer -->
  <view class="layout__footer">
    <slot name="footer"></slot>
  </view>
</view>

Copy the code

Components/layout/main – layout/main – layout. WXSSJS code

// components/layout/main-layout/main-layout.js
Component({
  options: {
    // Allow components to have multiple slots
    multipleSlots: true
  },
  /** * The initial data of the component */
  data: {
    // Status bar height
    statusBarHeight: 0
  },

  /** * executes */ when the component instance enters the page node tree
  attached() {
    const {statusBarHeight} = wx.getSystemInfoSync()
    console.log('System info ⚙️⚙️⚙️:', statusBarHeight)  // 44(px)
    this.setData({
      statusBarHeight
    })
  }
})

Copy the code

Components /layout/main-layout/main-layout. Less style code

.layout__ {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* header */
  /* "&" represents the name of the parent selector */
  &header {  // This represents.layout__
    background-color: chocolate;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 10;
    &-wrapper { // This represents.layout__header
      height: 46px;
      background-color: darkviolet;
      box-sizing: border-box; }}/* footer */
  &footer {
    background-color: darkslateblue;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    / * env is a CSS function, can use this function to get the iPhone Liu Haibing mobile security areas such as X to fit the reference link 🔗 : https://developer.mozilla.org/zh-CN/docs/Web/CSS/env () * /
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 10; }}Copy the code

Register as a global component in app.json

  "usingComponents": {
    "main-layout": "/components/layout/main-layout/main-layout"
  }
Copy the code

First, set the custom navigation bar on the page where the layout component is to be used. Set the custom navigation bar in the page configuration file xxx.json or app.json to set the global custom navigation bar

{
  "navigationStyle": "custom"
}
Copy the code

Use in the pages/layout-test/layout-test. WXML file

<main-layout>
  <view class="header" slot="header">I'm the header area</view>

  <view class="main" slot="main" style="background-color: red; height: 1000px">I'm the main area</view>
  <view class="footer" slot="footer">
    footer
  </view>
</main-layout>
Copy the code