Sticky 组件与 CSS 中position: sticky属性实现的效果一致,当组件在屏幕范围内时,会按照正常的布局排列,当组件滚出屏幕范围时,始终会固定在屏幕顶部。
将内容包裹在 Sticky
组件内即可。
<z-sticky>
<z-button type="primary">
基础用法
</z-button>
</z-sticky>
通过 offset-top
属性可以设置组件在吸顶时与顶部的距离。
<z-sticky :offset-top="150">
<z-button type="info">
吸顶距离
</z-button>
</z-sticky>
<z-sticky :container="container">
<z-button type="warning" :custom-style="{marginLeft:'300rpx'}">
指定容器
</z-button>
</z-sticky>
data() {
return {
container: '',
}
},
mounted() {
const query = uni.createSelectorQuery();
query.select('#container').boundingClientRect(data => {
this.container = data;
}).exec();
},
<scroll-view @scroll="onScroll" scroll-y id="scroller" style="height: 400rpx;">
<view style="height: 800rpx; padding-top: 50px;">
<z-sticky :scroll-top="scrollTop" :offset-top="offsetTop">
<z-button type="danger">
嵌套在 scroll-view 内
</z-button>
</z-sticky>
</view>
</scroll-view>
data() {
return {
scrollTop: 0,
offsetTop: 0,
}
},
methods: {
onScroll(event) {
uni.createSelectorQuery()
.select('#scroller')
.boundingClientRect((res) => {
this.scrollTop = event.detail.scrollTop;
this.offsetTop = res.top;
})
.exec();
},
}
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
z-index | 吸顶时的 z-index | number | 99 |
|
offset-top | 吸顶时与顶部的距离,默认 rpx | number | 0 |
|
disabled | 是否禁用吸顶 | boolean | false |
|
container | null | - | ||
scroll-top | null | - | ||
h5-nav-height | h5 顶部导航栏的高度 | number|string | 44 |
事件名 | 回调参数 | 说明 |
---|---|---|
scroll | event object - { scrollTop: number, isFixed: boolean } |
滚动时触发 |
名称 | 说明 | Bindings |
---|---|---|
default | 默认插槽 |