miniprogram-navigation-view

小程序自定义组件(导航栏视图)

Usage no npm install needed!

<script type="module">
  import miniprogramNavigationView from 'https://cdn.skypack.dev/miniprogram-navigation-view';
</script>

README

navigation-view

小程序自定义组件

使用此组件需要依赖小程序基础库 2.2.3 以上版本,同时依赖开发者工具的 npm 构建。具体详情可查阅官方 npm 文档

使用效果

navigation-view

使用方法

  1. 安装 navigation-view:
npm install --save miniprogram-navigation-view
  1. 在需要使用 navigation-view 的页面 page.json 中添加 navigation-view 自定义组件配置
{
  "usingComponents": {
    "navigation-view": "miniprogram-navigation-view"
  }
}
  1. WXML 文件中引用 navigation-view
<navigation-view></navigation-view> 
  1. 根据需要禁用页面导航栏

全局设置

{
  "window": {
    "navigationStyle": "custom"
  }
}

页面设置

{
  "navigationStyle": "custom"
}

navigation-view的属性介绍如下:

属性名 类型 默认值 是否必须 说明
title String 自定义导航栏视图 - 标题居中显示,如果长度超长省略号显示
title-style Object | String - - 设置标题文字样式,可以是字符串或者对象,具体用法查看例子;如果设置了字体颜色,将覆盖 text-style设置的字体颜色
text-style String white - 对应页面的 navigationBarTextStyle 导航栏标题颜色,仅支持 black / white
custom-style Object | String - - 设置导航栏样式,可以是字符串或者对象,具体用法查看例子
back-delta Number 1 - 点击返回回退指定数量的页面,如果为0不回退进发送回退事件,使用者自行处理;如果有0切换到大于0的数,则立即执行回退
visible-back Boolean true - 显示返回按钮,不显示则返回事件也不会发送
nav-class String - - 导航栏外部样式
nav-title-class String - - 标题外部样式

navigation-view的事件介绍如下:

back事件

只要存在返回按钮,手动点击返回按钮就会发送该事件

navigation-view的slot介绍如下:

back slot

可在当前返回图标之后添加文字兄弟节点作为返回按钮的子节点,作为返回按钮的一部分

<view slot="back">返回</view>

back-after slot

可在返回按钮后面自定义一个兄弟节点,不作为返回按钮的一部分

<view slot="back-after"><icon></icon></view>

注意

  • 因为表头采用的是display: fixed;布局,因此需要获取导航栏高度wx.STATUS_BAR_HEIGHT + wx.DEFAULT_HEADER_HEIGHT,这两个参数是导航栏自己设定的。