# 回到顶部

回到顶部:包含回首页和分享按钮,可设置bottom,right值,可设置距离顶部多少距离显示。

# 组件结构

<template>
	<view class="tui-scroll-top_box" v-show="isIndex || isShare || (visible && toggle)" :style="{ bottom: bottom + 'rpx', right: right + 'rpx' }">
		<view class="tui-scroll-top_item" v-if="isIndex" @tap.stop="goIndex">
			<image class="tui-scroll-top_img" :src="indexIcon"></image>
			<view class="tui-scroll-top_text">首页</view>
		</view>
		<button open-type="share" class="tui-share-btn" v-if="isShare && !customShare">
			<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex }"><image class="tui-scroll-top_img" :src="shareIcon"></image></view>
		</button>
		<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex }" v-if="isShare && customShare" @tap.stop="share">
			<image class="tui-scroll-top_img" :src="shareIcon"></image>
		</view>
		<view class="tui-scroll-top_item" :class="{ 'tui-scroll-item_top': isIndex || isShare }" v-show="visible && toggle" @tap.stop="goTop">
			<image class="tui-scroll-top_img" :src="topIcon"></image>
			<view class="tui-scroll-top_text tui-color-white">顶部</view>
		</view>
	</view>
</template>

# 组件脚本

<script>
	export default {
		name: "tuiScrollTop",
		
		...省略n行
		
		/**
		 * 注意:组件中使用的图片地址,将文件复制到自己项目中
		 * 如果图片位置与组件同级,编译成小程序时图片会丢失
		 * 拷贝static下整个components文件夹
		 * 也可直接转成base64(不建议)
		 * */
		
	}
</script>

# 组件样式

... 此处省略n行

# 脚本说明

# props

参数 类型 描述 默认值
bottom Number 回顶部按钮距离底部距离 单位rpx 180
right Number 回顶部按钮距离右侧距离 25
top Number 距离顶部多少距离显示 200
scrollTop Number 滚动距离 0
duration Number 回顶部滚动时间 120
isIndex Boolean 是否显示返回首页按钮 false
isShare Boolean 是否显示分享图标 false
customShare Boolean 自定义分享(小程序可使用button=>open-type="share") false
topIcon String 回顶部icon /static/components/scroll-top/icon_top_3x.png
indexIcon String 回首页icon /static/components/scroll-top/icon_index_3x.png
shareIcon String 分享icon /static/components/scroll-top/icon_share_3x.png

# methods

名称 描述
@index 回首页按钮事件
@share 分享按钮事件

# 示例

# H5预览地址

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

# H5二维码

# 小程序二维码