ThorUI文档

# tui-scroll-top 回到顶部

介绍

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

注意

  • 找到组件中使用的图片地址，将文件复制到自己项目中，也可自定义图片
  • 如果图片位置与组件同级，编译成小程序时图片会丢失
  • 可拷贝static文件夹下整个components文件夹到自己项目中
  • 也可直接转成base64（不建议）

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiScrollTop from "@/components/thorui/tui-scroll-top/tui-scroll-top.vue"
export default {
	components:{
		tuiScrollTop
	}
}

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

# uni-app版本平台差异说明

App-Nvue App-vue H5 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
升级中 √ √ √ √ √ √ √

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

{
  "usingComponents": {
    "tui-scroll-top": "/components/thorui/tui-scroll-top/tui-scroll-top"
  }
}

# 代码演示

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

基本使用

scrollTop 属性为滚动条滚动距离，通过 onPageScroll 生命周期函数获取。如果不想显示回顶部按钮，该属性不传值即可。

<!--uni-app-->
<tui-scroll-top :scrollTop="scrollTop"></tui-scroll-top>

<!--微信小程序-->
<tui-scroll-top scrollTop="{{scrollTop}}"></tui-scroll-top>
显示回首页以及分享按钮

通过 isIndex 属性控制显示隐藏回首页按钮，isShare 属性控制显示隐藏分享按钮。

<!--uni-app-->
<tui-scroll-top :scrollTop="scrollTop" isIndex isShare></tui-scroll-top>

<!--微信小程序-->
<tui-scroll-top scrollTop="{{scrollTop}}" isIndex isShare></tui-scroll-top>

# Slots

none

# 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

# Events

事件名 说明 回调参数
index 回首页按钮事件 {}
share 分享按钮事件 {}

# 预览

# 线上程序扫码预览

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

← tui-alert 弹框 →