暗黑模式
BackTop 返回顶部
预览
01:38
组件名：rice-back-top
一键返回顶部
平台兼容性
uni-app x
| Android | iOS | 鸿蒙Next | 微信小程序 | h5 |
|---|---|---|---|---|
| √ | √ | √ | √ | √ |
基础使用
由于小程序不支持在组件中监听页面滚动事件，所以 scroll-top 参数在小程序端是必传的，APP和H5端可以不传
在 iOS端 目前需要携带 parentId 参数，值为 <scroll-view id="backId"></scroll-view>中 id的值
html
<!-- #ifdef APP -->
<scroll-view id="backId">
<!-- #endif -->
<rice-back-top :scroll-top="scrollTop" parentId="backId"></rice-back-top>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->API
Props
| 属性名 | 类型 | 说明 | 默认值 |
|---|---|---|---|
| scroll-top | Number | 页面的滚动距离，通过onPageScroll生命周期获取，仅支持小程序 | - |
| offset | Number | 滚动条滑动多少距离时显示组件，默认400px | - |
| mode | String | 样式类型，可选值：round、half-round | round |
| parent-id | String | scroll-view 或 list 组件的 id | - |
| right | String|Number | 距离页面右侧的距离，默认 20px | - |
| bottom | String|Number | 距离页面底部的距离，组件内部会自动避开底部tabbar和安全区域，默认 100px | - |
| duration | Number | 滚动到顶部所需的时间，单位ms，默认100ms | - |
| icon | String | 按钮内部的图标，设置为空字符串就不显示图标，默认值back-top | - |
| icon-size | String|Number | 图标的大小 | - |
| text-color | String | 图标/文字的颜色 | - |
| text | String | 按钮内部的文字,优先级低于icon，图标和文字同时只能显示一个(使用自定义插槽除外) | - |
| text-size | String | 按钮内部文字的大小，默认13px | - |
| width | String|Number | 宽度，默认45px | - |
| height | String|Number | 高度，默认45px | - |
| radius | String|Number | 圆角值，默认和width一致 | - |
| zoom | Boolean | 是否启用缩放动画 | - |
| bg-color | String | 按钮背景颜色 | - |
| z-index | Number | z-index的值,默认998 | - |
| custom-style | Object | 自定义按钮样式 | - |
Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| click | 点击时触发 | (event:UniPointerEvent) |
| 名称 | 说明 |
|---|---|
| default | 默认内容 |
类型定义
组件导出如下类型
ts
// 组件类型
const backTopRef = ref<RiceBackTopComponentPublicInstance | null>(null)