uPlus

布局

页面布局layout

# Layout

uplus 中的页面都应该基于这个 layout 的，除了个别页面如：login , 404, 401 等页面没有使用该layout ，这个是uplus (opens new window)最外层的框架结构, 往往会包含整个App公共的内容等等。比如商城项目中的全局优惠券广告等。
代码位置:@/layout (opens new window)

一个页面只能有一个layout，避免layout里面的内容乱闯。

/index                                  /cart
+------------------+                  +-----------------+
| layout           |                  | layout          |
| +--------------+ |                  | +-------------+ |
| | index.vue    | |  +------------>  | | cart.vue    | |
| |              | |                  | |             | |
| +--------------+ |                  | +-------------+ |
+------------------+                  +-----------------+

目前 layout 内容包含：app-header 、 footer-tabs，头部导航和底部导航，二次开发可添加自己app场景内容。

  • footer-tabs 底部导航会根据路由动态生成，也能动态修改路由如何更改
  • app-header 每个嵌套了 layout 的页面默认是显示的，如果不想要显示，修改参数 :header="false" 就可以。 查看app-header

# 添加header配置

<layout :appHeader="appHeader">
</layout>

appHeader参数 查看app-header

参数 默认 说明
isBorder false 下划线
backgroundColor 背景颜色，默认是 --header-background-color
back true 是否显示左边icon
leftIcon 左边icon 如需新增，修改 icon (opens new window) @font-face
color 字体颜色，默认是 --header-font-color
leftText 左边的文本
title 页面标题

底部导航