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 | 根节点样式 | - |
|