# Footer 页脚

概述

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

# 支持平台

App-vue App-Nvue 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序 H5 PC 快手小程序 钉钉小程序

# 引入

以下介绍两种常用的引入方式。
第一种:在页面中引用、注册
import fuiFooter from "@/components/firstui/fui-footer/fui-footer.vue"
export default {
	components:{
		fuiFooter
	}
}
1
2
3
4
5
6
第二种:easycom组件规范
传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。

First UI easycom配置请查看 快速上手

如果不了解easycom,可先查看 官网文档 (opens new window)

# 代码演示

部分示例演示,完整使用请参考示例程序以及文档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 仅nvue生效,其他平台通过css变量修改
isFixed Boolean 是否固定在底部 false -
bottom V2.4.0+ Number,String 固定底部时bottom值,单位rpx 0 -
safeArea V1.5.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

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

示例预览

# 示例代码地址

FirstUIFooter 页脚
Last Updated: 5/30/2024, 10:36:36 AM