返回顶部 xBacktop

预览

介绍

在uvue页面中，根节点一定是scroll-view并且设置为flex:1才可滚动到顶部。如果你想局部放到scroll-view组件中，你需要scroll事件中的top传递到属性scrollTop上并启用局部滚动置顶如果你想改变或者自定位置，你可以直接在组件上写style来覆盖定位。详见：https://doc.dcloud.net.cn/uni-app-x/api/page-scroll-to.html

平台兼容

Harmony	H5	andriod	IOS	小程序	UTS	UNIAPP-X SDK	version
☑	☑	☑️	☑️	☑️	☑️	4.76+	1.1.18

文件路径


@/uni_modules/tmx-ui/components/x-backtop/x-backtop.uvue

使用


<x-backtop></x-backtop>

Props 属性

名称	说明	类型	默认值
round	`圆角,空值时取全局的drawr圆角。`	`union`	`"60px"`
offset	`向下滚动页面时，如果超过此值显示返回顶部按钮。`	`number`	`100`
bgColor	`背景,支持渐变值如:linear-gradient(to left, #FFED46, #FF7EC7)` `默认空值，取全局主题值。`	`string`	`""`
width	`宽度`	`union`	`"60px"`
height	`高度`	`union`	`"60px"`
color	`图标颜色。`	`string`	`"white"`
icon	`图标`	`string`	`"skip-up-fill"`
iconSize	`图标大小`	`union`	`"32"`
scrollTop	`如果你想让本组件放置到局部的scroll中时，你外部scrollview通过scroll事件取得距离顶部的位置传递到此。`	`number`	`0`
disabledPageScroll	`禁用页面级根节点滚动后，可以通过scrollTop来实现局部置顶功能。`	`boolean`	`false`

Events 事件

名称	参数	说明
click	`-`	点击时触发

Slots 插槽

名称	说明	数据
default	`默认图标插槽`	-

Ref 方法

名称	参数	返回值	说明

示例文件路径

json


/pages/daohang/backtop

示例源码

uvue

vue

<template>

	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor"
			:front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<x-sheet>
		<x-text font-size="18" class=" text-weight-b mb-8">返回顶部 xBacktop</x-text>
		<x-text color="#999999">请往下滚动100px，触发显示返回顶部按钮，请注意观察右下角。</x-text>
		<x-text color="#999999">添加自定style可以覆盖位置，将元素定位到左边。</x-text>

	</x-sheet>

	<x-sheet>
		<view class="relative" style="height:300px;">
			<list-view :scroll-top="scrollTop" @scroll="onScroll" style="height:100%;">
				<list-item>
					<x-text color="#999999">局部滚动我</x-text>
					<view style="height:1200px"></view>
				</list-item>
			</list-view>
			<x-backtop @click="scrollSetop" :scroll-top="scrollTop" :offset="50" :disabledPageScroll="true"></x-backtop>
		</view>
	</x-sheet>
	<!--  style="right: auto;left: 30px;" 添加自定style可以覆盖位置，将元素定位到左边。 -->
	<x-backtop></x-backtop>
	<x-backtop style="right: auto;left: 16px;"></x-backtop>

	<view style="height: 1600px;"></view>

</template>

<script setup lang="ts">
	const scrollTop = ref(0)
	const onScroll = (evt : UniScrollEvent) => {
		scrollTop.value = evt.detail.scrollTop
	}
	const scrollSetop = () => {
		scrollTop.value = 0
	}
</script>

<style lang="scss">

</style>

返回顶部 xBacktop ​

介绍 ​

平台兼容 ​

文件路径 ​

使用 ​

Props 属性 ​

Events 事件 ​

Slots 插槽 ​

Ref 方法 ​

示例文件路径 ​

示例源码 ​