请滚动右侧的示例页面,当页面滚动 200px 时,右下角会出现返回顶部按钮。
const list = [...Array(50).keys()]
;<View>
<Cell.Group>
{arr.map((v) => {
return <Cell key={v}>{v}</Cell>
})}
</Cell.Group>
<BackTop />
</View>
通过 right 和 bottom 属性来设置组件距离右侧和底部的位置。
function CustomContent) {
const list = [...Array(50).keys()];
return (
<View>
<Cell.Group>
{list.map((v) => {
return (
<Cell key={v}>{v}</Cell>
)
})}
</Cell.Group>
<BackTop />
</View>
)
}
使用 children
来自定义组件展示的内容。
function CustomContent() {
const list = [...Array(50).keys()]
return (
<View>
<Cell.Group>
{list.map((v) => {
return <Cell key={v}>{v}</Cell>
})}
</Cell.Group>
<BackTop>返回顶部</BackTop>
</View>
)
}
.custom-back-top {
width: 160px;
font-size: 28px;
text-align: center;
}
当设置 immediate
属性后,页面滚动的过程不再有过渡效果,而是瞬间滚动到顶部。
function SetImmediate() {
const list = [...Array(50).keys()]
return (
<View>
<Cell.Group>
{list.map((v) => {
return <Cell key={v}>{v}</Cell>
})}
</Cell.Group>
<BackTop immediate />
</View>
)
}
| 参数 | 说明 | 类型 | 默认值 |
| --------- | ----------------------------------- | --------- | -------- | ---- |
| right | 距离页面右侧的距离,默认单位为 px
| number | string | 30
|
| bottom | 距离页面底部的距离,默认单位为 px
| number | string | 40
|
| offset | 滚动高度达到此参数值时才显示组件 | number | 200
|
| immediate | 是否瞬间滚动到顶部 | boolean | false
|
| zIndex | 设 置组件的 z-index 层级 | number | 100
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
名称 | 默认值 | 描述 |
---|---|---|
—back-top-size | 80px | - |
—back-top-icon-size | 40px | - |
—back-top-right | 60px | - |
—back-top-bottom | 80px | - |
—back-top-z-index | 100 | - |
—back-top-text-color | #fff | - |
—back-top-background | var(—blue, $blue) | - |