54 lines
1.9 KiB
Markdown
54 lines
1.9 KiB
Markdown
# Backtop 回到顶部
|
||
|
||
用于返回页面顶部的操作按钮。
|
||
|
||
## 基本用法
|
||
|
||
由于返回顶部需要实时监听滚动条位置，但是在uniapp的组件中不能获取页面的滚动信息，
|
||
所以只能在页面的`onPageScroll`生命周期中获取滚动条位置，再通过`Props`传递给组件。
|
||
|
||
```html
|
||
<wd-backtop :scrollTop="scrollTop"></wd-backtop>
|
||
```
|
||
|
||
```typescript
|
||
const scrollTop = ref<number>(0)
|
||
onPageScroll((e) => {
|
||
scrollTop.value = e.scrollTop
|
||
})
|
||
```
|
||
|
||
## 自定义图标
|
||
|
||
```html
|
||
<wd-backtop :scrollTop="scrollTop">
|
||
<text>TOP<text>
|
||
</wd-backtop>
|
||
```
|
||
|
||
## 自定义样式
|
||
|
||
```html
|
||
<wd-backtop :scrollTop="scrollTop" customStyle="background: #007aff;color:white;"></wd-backtop>
|
||
```
|
||
|
||
## Attributes
|
||
|
||
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
|
||
| --------- | -------------------------------- | ------ | ------ | ------ | -------- |
|
||
| scrollTop | 页面滚动距离 | number | - | - | - |
|
||
| top | 距离顶部多少距离时显示，单位`px` | number | - | 300 | - |
|
||
| duration | 返回顶部滚动时间，单位`ms` | number | - | 100 | - |
|
||
| zIndex | 组件z-index属性 | number | - | 10 | - |
|
||
| iconStyle | 自定义`icon`样式 | string | - | - | - |
|
||
| shape | 按钮形状 | string | square | circle | - |
|
||
| bottom | 距离屏幕底部的距离，单位`px` | number | - | 100 | - |
|
||
| right | 距离屏幕右边距离，单位`px` | number | - | 20 | - |
|
||
|
||
## 外部样式类
|
||
|
||
| 类名 | 说明 | 最低版本 |
|
||
| ------------ | ---------- | -------- |
|
||
| custom-class | 根节点样式 | - |
|
||
| custom-style | 根节点样式 | - |
|