低代码高性能原生UI框架Backtop 返回顶部
组件类型：UxBacktopComponentPublicInstance
支持形状、图标、大小、颜色、背景色、插槽等自定义样式
平台兼容性
| Android | iOS | web | 鸿蒙 Next | 小程序 |
|---|---|---|---|---|
| √ | √ | √ | x | x |
Slots
| 名称 | 说明 |
|---|---|
| default | 默认插槽 |
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| parent | String | - | 父级[scroll-view list-view] id，如果未指定系统会自动查找父级或平级下的[scroll-view list-view] |
| shape | String | 'circle' | 形状 |
| icon | String | 'arrowup' | 图标 |
| text | String | 'TOP' | 文字 |
| duration | Number | 100 | 返回顶部滚动时间 |
| right | Number | 30 | 距右距离 |
| bottom | Number | 100 | 距底距离 |
| iconSize | Number | 18 | 图标大小 |
| fontSize | Number | 14 | 字体大小 |
| fontBold | Boolean | false | 字体加粗 |
| customFont | String | - | 网络字体路径 或 自定义字体路径 |
| customFamily | String | - | 字体family |
| background | String | '#FFFFFF' | 背景色 |
| zIndex | Number | 10000 | 层级z-index |
| fixed | Boolean | true | 固定定位 |
shape
| 属性名 | 说明 |
|---|---|
| circle | 圆形 |
| square | 矩形 |
Events
| 事件名 | 说明 | 参数 |
|---|---|---|
| click | 点击事件 | MouseEvent |
示例代码
html
<template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll id="testId" @scroll="scroll">
<ux-card direction="column" icon="flag" title="返回顶部" :bold="true">
<ux-text text="支持形状、图标、大小、颜色、背景色、插槽等自定义样式"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="返回顶部" text="https://www.uxframe.cn/component/func/backtop.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-placeholder :height="1000">
<ux-row justify="center" :mt="100">
<ux-text text="上划查看效果"></ux-text>
</ux-row>
</ux-placeholder>
<ux-backtop ref="uxBacktopRef1" shape="square" parent="testId" :right="30"></ux-backtop>
<ux-backtop ref="uxBacktopRef2" icon="up" background="blue" color="white" parent="testId" :right="110"></ux-backtop>
<ux-backtop ref="uxBacktopRef3" icon="up" text="顶" parent="testId" :right="210"></ux-backtop>
<ux-backtop ref="uxBacktopRef4" parent="testId" :right="310">
<ux-text text="顶我"></ux-text>
</ux-backtop>
</ux-scroll>
</ux-page>
</template><template>
<ux-page>
<ux-navbar :title="title" :border="false"></ux-navbar>
<ux-scroll id="testId" @scroll="scroll">
<ux-card direction="column" icon="flag" title="返回顶部" :bold="true">
<ux-text text="支持形状、图标、大小、颜色、背景色、插槽等自定义样式"></ux-text>
<ux-row :flex="true" align="top" :mt="5" style="width: 100%;">
<ux-text text="详细文档："></ux-text>
<ux-text style="flex: 1" name="返回顶部" text="https://www.uxframe.cn/component/func/backtop.html" mode="link"></ux-text>
</ux-row>
</ux-card>
<ux-placeholder :height="1000">
<ux-row justify="center" :mt="100">
<ux-text text="上划查看效果"></ux-text>
</ux-row>
</ux-placeholder>
<ux-backtop ref="uxBacktopRef1" shape="square" parent="testId" :right="30"></ux-backtop>
<ux-backtop ref="uxBacktopRef2" icon="up" background="blue" color="white" parent="testId" :right="110"></ux-backtop>
<ux-backtop ref="uxBacktopRef3" icon="up" text="顶" parent="testId" :right="210"></ux-backtop>
<ux-backtop ref="uxBacktopRef4" parent="testId" :right="310">
<ux-text text="顶我"></ux-text>
</ux-backtop>
</ux-scroll>
</ux-page>
</template>ts
<script setup>
let title = ''
const uxBacktopRef1 = ref<UxBacktopComponentPublicInstance | null>(null)
const uxBacktopRef2 = ref<UxBacktopComponentPublicInstance | null>(null)
const uxBacktopRef3 = ref<UxBacktopComponentPublicInstance | null>(null)
const uxBacktopRef4 = ref<UxBacktopComponentPublicInstance | null>(null)
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function scroll(e: ScrollEvent) {
let show = e.detail.scrollTop > 100
uxBacktopRef1.value!.$callMethod('setShow', show)
uxBacktopRef2.value!.$callMethod('setShow', show)
uxBacktopRef3.value!.$callMethod('setShow', show)
uxBacktopRef4.value!.$callMethod('setShow', show)
}
</script><script setup>
let title = ''
const uxBacktopRef1 = ref<UxBacktopComponentPublicInstance | null>(null)
const uxBacktopRef2 = ref<UxBacktopComponentPublicInstance | null>(null)
const uxBacktopRef3 = ref<UxBacktopComponentPublicInstance | null>(null)
const uxBacktopRef4 = ref<UxBacktopComponentPublicInstance | null>(null)
onLoad((e: OnLoadOptions) => {
title = e['title'] ?? ''
})
function scroll(e: ScrollEvent) {
let show = e.detail.scrollTop > 100
uxBacktopRef1.value!.$callMethod('setShow', show)
uxBacktopRef2.value!.$callMethod('setShow', show)
uxBacktopRef3.value!.$callMethod('setShow', show)
uxBacktopRef4.value!.$callMethod('setShow', show)
}
</script>css
<style lang="scss">
.b1 {
background-color: blue;
width: 100%;
height: 300px;
display: flex;
}
.b2 {
background-color: red;
width: 100%;
height: 300px;
}
.b3 {
background-color: black;
width: 100%;
height: 300px;
}
.b4 {
background-color: green;
width: 100%;
height: 300px;
}
</style><style lang="scss">
.b1 {
background-color: blue;
width: 100%;
height: 300px;
display: flex;
}
.b2 {
background-color: red;
width: 100%;
height: 300px;
}
.b3 {
background-color: black;
width: 100%;
height: 300px;
}
.b4 {
background-color: green;
width: 100%;
height: 300px;
}
</style>