navigation

Introduction

A customizable top navigation bar that supports configuring the home page and previous-page buttons.

Property Description

Property Name	Type	Default Value	Required	Description
type	string	default	No	Custom navigation type. Currently only the default configuration is available.
backgroundColor	string	#fff	No	Navigation bar background color
frontColor	string	#000	No	Foreground color (currently refers to font color)
opacity	number	1	No	Navigation bar background transparency
navigationStyle	object		No	Custom style for the navigation container (added to inline style), using camel case for CSS property names
backIcon	boolean	false	No	Whether to display the back icon
homeIcon	boolean	false	No	Whether to display the home icon
backhdl	EventHandle		No	Callback event for clicking the back icon
homehdl	EventHandle		No	Callback event for clicking the home icon

Code Example

<dlt-navigation
  bind:backhdl="backHandler"
  bind:homehdl="homeHandler"
  :navigationStyle="navigationStyle"
  :opacity="opacity"
  :backIcon="backIcon"
  :homeIcon="homeIcon"
  :backgroundColor="backgroundColor"
  :frontColor="frontColor"
>
  <text>Top Title</text>
</dlt-navigation>

<view class="page" :style="{'padding-top': navigationHeight + 'px'}">
  <text>{{text}}</text>
</view>

.page {
  background-color: #f4f5f9;
}

Page({
  data: {
    text: 'this is a blank page',
    navigationStyle: {
      fontSize: '18px',
    },
    frontColor: '#ff0',
    opacity: 1,
    backIcon: false,
    homeIcon: false,
    backgroundColor: 'white',
    navigationHeight: 100,
    type: 'default',
  },
  backHandler() {
    console.log('navigate back');
  },
  homeHandler() {
    console.log('navigate to home page');
  },
  onShow() {
    const _this = this;
    dlt.getSystemInfo({
      success: function (res) {
        const { capsuleTranslationY, capsuleHeight, pixelRatio } = res;
        const navigationHeight =
          (capsuleTranslationY +
            capsuleHeight +
            (capsuleTranslationY - capsuleHeight)) /
          pixelRatio;
        _this.setData({
          navigationHeight,
        });
      },
    });
  },
});

Other Instructions

After using this component, it is recommended to leave the overall height of the navigation bar at the top of the page to avoid the page content being covered.

Calculation of the overall height of the top navigation bar:

Get device information using dlt.getSystemInfo, and calculate based on the returned content of the device information (in pixels):

const navigationHeight =
  (capsuleTranslationY +
    capsuleHeight +
    (capsuleTranslationY - capsuleHeight)) /
  pixelRatio;