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

Events 事件

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

Slots 插槽

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

Ref 方法

名称	参数	返回值	说明

示例文件路径

json


/pages/daohang/backtop

示例源码

uvue

vue

<template>
	<!-- #ifdef APP -->
	<scroll-view style="flex:1">
	<!-- #endif -->
	<!-- #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>
	<!-- #ifdef APP -->
	</scroll-view>
	<!-- #endif -->
</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 方法 ​

示例文件路径 ​

示例源码 ​