# tui-footer 页脚

介绍

Footer 页脚:支持基本样式设置,可设置是否固定在底部。

# 引入

# uni-app引入

第一种,手动引入(可全局引入)

import tuiFooter from "@/components/thorui/tui-footer/tui-footer"
export default {
	components:{
		tuiFooter
	}
}

第二种,开启easycom组件模式,如果不了解如何配置,可先查看 官网文档 (opens new window)

# 微信小程序引入(可在app.json中全局引入)

{
  "usingComponents": {
    "tui-footer": "/components/thorui/tui-footer/tui-footer"
  }
}

# 代码演示

部分功能演示,具体可参考示例程序以及文档API。

基本使用

通过 copyright 属性设置显示文本内容。

<tui-footer copyright="Copyright © 2014-2019 Thor UI."></tui-footer>
加入链接导航

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

<!--uni-app-->
<tui-footer copyright="Copyright © 2014-2019 Thor UI." :navigate="navigate"></tui-footer>

<!--微信小程序-->
<tui-footer copyright="Copyright © 2014-2019 Thor UI." navigate="{{navigate}}"></tui-footer>
// data 数据
navigate: [{
	url: "/pages/tabbar/index/index",
	type: "switchTab",
	text: "返回首页",
	color: "#5677fc"
}, {
	url: "/pages/tabbar/my/my",
	type: "switchTab",
	text: "个人中心",
	color: "#5677fc",
	size: 30
}]

# Slots

none

# Props

参数 类型 说明 默认值
navigate Array 链接设置,参考官方navigator组件文档,类型: Array [ ]
copyright String 底部文本 All Rights Reserved.
color String copyright 字体颜色 #A7A7A7
size Number copyright 字体大小 24
backgroundColor String footer背景颜色 transparent
fixed Boolean 是否固定在底部 true

# Events

none

# 预览

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码