移动端门户导航栏配置

移动端门户导航栏包括：工作台、任务、通讯录和我的等页面，如下图所示

1719545168849

在“功能树配置”中的移动端里，添加系统提供的“移动首页导航”目录及下面的页面

1719545512370

“移动首页导航”目录下面的页面，都会显示到导航栏中

1719545001081

上图中的移动首页导航包括5个页面，显示效果如下图所示

1719545731775

添加导航栏页面

在功能树配置中，添加一个页面到“移动首页导航”目录下，在“类型”属性中选中“移动导航栏”，并设置“扩展”属性，如下图所示

1719545138638

在“扩展属性”中配置导航栏信息，格式及说明如下

{
   "tabBar": {
      "iconPath"：未选中时的图标
      "selectedIconPath"：选中时的图标
      "homePage"：默认“移动首页导航”中的第一页作为主页，设置为 true，当前页面会作为主页
   }
}

特别说明：导航栏图标支持图片和 svg 图标两种格式

  • 使用图片需要设置两张图片，未选中时图片和选中时图片，写作：{"tabBar":{"iconPath":"/xxx/a.png","selectIconPath":"/xxx/b.png"}}
  • 使用 svg 图标，设置一个图标即可，选中时会使用主题色渲染图标，写作：{"tabBar":{"iconPath":"<svg/>"}}

导航页面使用 SVG 图标，扩展属性的示例代码如下

{
    "tabBar": {
        "iconPath": "<?xml version=\"1.0\" encoding=\"UTF-8\"?><svg viewBox=\"0 0 48 48\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"><circle cx=\"24\" cy=\"12\" r=\"8\" fill=\"none\"  stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/><path d=\"M42 44C42 34.0589 33.9411 26 24 26C14.0589 26 6 34.0589 6 44\"  stroke-width=\"3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>"
    }
}

页面顺序配置

“移动首页导航”目录下页面的顺序，即为导航栏显示页面的顺序。在功能树配置中，通过拖拽或上移、下移调整顺序

首页配置

默认“移动首页导航”中的第一页作为主页。扩展属性中提供 tabBar.homePage 用于将当前页设置为首页，示例代码如下

{
    "tabBar": {
        "homePage": true
    }
}

特别说明

  • 第三方的页面，不能作为首页

results matching ""

    No results matching ""