# Footer 页脚

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

# 组件结构

<template>
	<view class="tui-footer-class tui-footer" :class="[fixed?'tui-fixed':'']" :style='{backgroundColor:backgroundColor}'>
		<view class="tui-footer-link" v-if="navigate.length>0">
			<block v-for="(item,index) in navigate" :key="index">
				<navigator class="tui-link" hover-class="tui-link-hover" :hover-stop-propagation="true" :style="{color:(item.color || '#596d96'),fontSize:(item.size || 28)+'rpx'}"
				 :open-type="item.type" :url="item.url" :target="item.target" :delta="item.delta" :app-id="item.appid"
				 :path="item.path" :extra-data="item.extradata" :bindsuccess="item.bindsuccess" :bindfail="item.bindfail">{{item.text}}</navigator>
			</block>
		</view>
		<view class="tui-footer-copyright" :style="{color:color,fontSize:size+'rpx'}">
			{{copyright}}
		</view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: "tuiFooter",
		props: {
			//type target url delta appid path extradata bindsuccess bindfail text color size
			//链接设置  数据格式对应上面注释的属性值
			navigate: {
				type: Array,
				default:function(){
					return  []
				}
			},
			//底部文本
			copyright: {
				type: String,
				default: "All Rights Reserved."
			},
			//copyright 字体颜色
			color: {
				type: String,
				default: "#A7A7A7"
			},
			//copyright 字体大小
			size: {
				type: Number,
				default: 24
			},
			//footer背景颜色
			backgroundColor: {
				type: String,
				default: "transparent"
			},
			//是否固定在底部
			fixed: {
				type: Boolean,
				default: true
			}
		},
		methods: {
		}
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

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

# methods

# 示例

# H5预览地址

https://www.thorui.cn/h5/#/pages/extend/footer/footer

# H5二维码

# 小程序二维码