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>

// data 数据 及 方法
export default {
 data() {
 	return {
 		scrollTop: 0,
 	}
 },
 methods: {
 	
 },
 onPageScroll(e) {
 	this.scrollTop = e.scrollTop;
 }
}

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

// data 数据 及 方法
Page({
  data: {
    scrollTop: 0,
  },
 onPageScroll(e) {
 	this.setData({
 		scrollTop: e.scrollTop
 	})
  }
})

// Make sure to add code blocks to your code group

显示回首页以及分享按钮

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

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

// data 数据 及 方法
export default {
 data() {
 	return {
 		scrollTop: 0,
 	}
 },
 methods: {
 	
 },
 onPageScroll(e) {
 	this.scrollTop = e.scrollTop;
 }
}

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

// data 数据 及 方法
Page({
  data: {
    scrollTop: 0,
  },
 onPageScroll(e) {
 	this.setData({
 		scrollTop: e.scrollTop
 	})
  }
})

// Make sure to add code blocks to your code group

Slots

插槽名称	插槽说明
-	-

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

TIP

使用时注意查看icon 图片路径，是否已拷贝至项目中，不放在组件同级是由于编译至小程序时图片会丢失。

Events

注：uni-app端绑定事件使用@前缀，如@index；微信小程序原生使用bind前缀，如bindindex

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

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

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