navigation

简介

顶部自定义的导航栏，支持配置返回首页、上一页按钮。

属性说明

属性名	类型	默认值	必填	说明
type	string	default	否	自定义导航类型。目前仅有 default 配置。
backgroundColor	string	#fff	否	导航背景色
frontColor	string	#000	否	前景颜色（目前特指字体颜色）
opacity	number	1	否	导航栏背景透明度
navigationStyle	object		否	导航容器自定义样式（加在行间样式上），CSS property 名要用驼峰式
backIcon	boolean	false	否	是否显示返回图标
homeIcon	boolean	false	否	是否显示首页图标
backhdl	EventHandle		否	点击返回图标的回调事件
homehdl	EventHandle		否	点击首页图标的回调事件

代码示例

<dlt-navigation
  bind:backhdl="backHandler"
  bind:homehdl="homeHandler"
  :navigationStyle="navigationStyle"
  :opacity="opacity"
  :backIcon="backIcon"
  :homeIcon="homeIcon"
  :backgroundColor="backgroundColor"
  :frontColor="frontColor"
>
  <text>顶部标题</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,
        });
      },
    });
  },
});

其他说明

使用该组件后，建议页面顶部留出导航栏的整体高度，避免页面内容被遮盖。

顶部导航栏整体高度的计算方式：

获取设备信息 dlt.getSystemInfo，基于设备信息返回的内容计算（单位 px）：

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