# Footer 页脚

概述

Footer 页脚,主要使用场景:页面底部显示导航链接、版权等信息。

# 引入

以下介绍两种常用的引入方式。
第一种:在页面json文件中引入
{
  "navigationBarTitleText": "页脚",
  "usingComponents": {
    "fui-footer":"/components/firstui/fui-footer/fui-footer"
  }
}
1
2
3
4
5
6
第二种:在根目录app.json文件中全局引入
 "usingComponents": {
   "fui-footer":"components/firstui/fui-footer/fui-footer"
 }
1
2
3

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档API。
基础使用

通过 text 属性设置版权信息。

<fui-footer text="Copyright © 2021 firstui.cn"></fui-footer>
1
设置导航链接

通过 navigate 属性设置导航链接。

<fui-footer navigate="{{navigate}}" text="Copyright © 2021 firstui.cn"></fui-footer>
1
//navigate数据
navigate: [{
	text: '底部链接',
	openType: 'navigateBack'
}, {
	text: '底部链接',
	openType: 'navigateBack'
}]
1
2
3
4
5
6
7
8
固定于底部

通过 isFixed 属性设置页脚是否固定于底部。

<fui-footer isFixed text="Copyright © 2021 firstui.cn"></fui-footer>
1

# Slots

插槽名称 说明
- -

# Props

属性名 类型 说明 默认值 其他说明
navigate Array 导航链接设置 [ ] -
text String 底部文本,版权信息 - -
color String 文本字体颜色 #B2B2B2 -
size Number,String 文本字体大小,单位rpx 24 -
background String footer背景颜色 transparent -
borderColor String 导航链接之间分隔线颜色 #B2B2B2 可通过css变量修改
isFixed Boolean 是否固定在底部 false -
bottom V2.4.0+ Number,String 固定底部时bottom值,单位rpx 0 -
safeArea V2.4.0+ Boolean 是否适配底部安全区 true -
navigate 有效值

navigate url、openType、delta属性值可参考官方组件navigator (opens new window)

navigate: [{
	url: 'String', //应用内的跳转链接,值为相对路径或绝对路径
	openType: 'String', //跳转方式,可取值:navigate、redirect、switchTab、navigateBack等
	delta:'Number', //当 openType 为 'navigateBack' 时有效,表示回退的层数
	text:'String', //链接文本
	color:'String', //文本字体颜色
	size:'Number'  //文本字体大小,单位rpx
}]
1
2
3
4
5
6
7
8

# Events

事件名 说明 回调参数
- - -

示例预览

Last Updated: 5/30/2024, 10:36:22 AM