TnFooter-页脚

改组件一般用于放在页面或者内容的最底部，用于展示版权信息等

组件位置

nodeuni_modules

typescript

import TnFooter from '@tuniao/tnui-vue3-uniapp/components/footer/src/footer.vue'

import TnFooter from '@tuniao/tnui-vue3-uniapp/components/footer/src/footer.vue'

typescript

import TnFooter from '@/uni_modules/tuniaoui-vue3/components/footer/src/footer.vue'

import TnFooter from '@/uni_modules/tuniaoui-vue3/components/footer/src/footer.vue'

平台差异说明

App(vue)	H5	微信小程序	支付宝小程序	...
√	√	√	√	适配中

基础使用

通过content设置页脚的内容
通过navigator设置页脚导航信息，navigator是一个数组，数组中的每一项都是一个对象，对象中包含url、title、textColor三个属性，url表示跳转的链接，title表示链接的文本，textColor表示链接的文本颜色

vue

<script lang="ts" setup>
import type { FooterNavigatorData } from '@tuniao/tnui-vue3-uniapp'

const footerNavigator: FooterNavigatorData = [
  { title: '回到首页', url: '/pages/index/index' },
  { title: '关于图鸟', url: '/pages/about/index' },
]
</script>

<template>
  <TnFooter content="Copyright © 2023 图鸟科技" :navigator="footerNavigator" />
</template>

<script lang="ts" setup>
import type { FooterNavigatorData } from '@tuniao/tnui-vue3-uniapp'

const footerNavigator: FooterNavigatorData = [
  { title: '回到首页', url: '/pages/index/index' },
  { title: '关于图鸟', url: '/pages/about/index' },
]
</script>

<template>
  <TnFooter content="Copyright © 2023 图鸟科技" :navigator="footerNavigator" />
</template>

固定页脚在最底部

默认情况下页脚固定在当前容器的最底部，并且在 IOS 设备上如果存在安全区域会在底部空出一部分

注意

如果是固定在容器的最底部，父容器必须设置position: relative，否则页脚会固定在页面的最底部

设置fixed为false可以取消页脚固定在最底部的效果，此时页脚会跟随页面滚动

配置fixed-mode可以设置固定在底部的方式，page 固定在页面底部，container 固定在容器底部

页脚随页面进行滚动

vue

<template>
  <TnFooter content="Copyright © 2023 图鸟科技" :fixed="false" />
</template>

<template>
  <TnFooter content="Copyright © 2023 图鸟科技" :fixed="false" />
</template>

固定在页面的底部

vue

<template>
  <TnFooter content="Copyright © 2023 图鸟科技" fixed-mode="page" />
</template>

<template>
  <TnFooter content="Copyright © 2023 图鸟科技" fixed-mode="page" />
</template>

设置页面距离底部的距离

可以通过设置offset-bottom的值来设置页脚距离页面底部的距离，默认单位为rpx，如果同时开启了自动设置安全底部距离时，两者的值会进行叠加

vue

<template>
  <TnFooter content="页脚" :offset-bottom="20" />
</template>

<template>
  <TnFooter content="页脚" :offset-bottom="20" />
</template>

API

Props

属性名	说明	类型	默认值	可选值
content	页脚内容	String	-	-
navigator	页脚导航信息	FooterNavigatorData	-	-
size	页脚字体尺寸大小，内置了 `sm` 、 `lg` 、 `xl` 三种尺寸，可以传递指定的尺寸设置，默认单位 `rpx`	String	-	-
text-color	内容文字颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
navigator-text-color	导航信息字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba	String	-	-
offset-bottom	页脚距离底部的距离，单位 `rpx`	String	-	-
fixed	是否固定在底部	Boolean	`true`	`false`
fixed-mode	固定在底部的方式，`page` 固定在页面底部，`container` 固定在容器底部	String	`container`	`page`
safe-area-inset-bottom	是否开启底部安全边距	Boolean	`true`	`false`

Events

事件名	说明	类型
click	点击事件	`() => void`
navigator-click	导航点击事件	`(navigator: FooterNavigator) => void`

FooterNavigatorData = FooterNavigator[]

FooterNavigator

属性名	说明	类型	默认值	可选值	必填
title	导航标题	String	-	-	是
url	导航链接	String	-	-	否
textColor	导航信息字体颜色，支持图鸟内置的颜色值、hex、rgb、rgba，会覆盖`navigator-text-color`设置的值	String	-	-	否

TnFooter-页脚 ​

组件位置 ​

平台差异说明 ​

基础使用 ​

固定页脚在最底部 ​

页脚随页面进行滚动 ​

固定在页面的底部 ​

设置页面距离底部的距离 ​

API ​

Props ​

Events ​

FooterNavigatorData = FooterNavigator[] ​

FooterNavigator ​