Sticky 组件使用教程
优质
小牛编辑
129浏览
2023-12-01
安装
import { Sticky } from 'vux'
export default {
components: {
Sticky
}
}
// 在入口文件全局引入
import Vue from 'vue'
import { Sticky } from 'vux'
Vue.component('sticky', Sticky)
在Chrome模拟器运行时你可能会发现没有效果,这是因为Chrome并不支持原生sticky实现而模拟器环境是iPhone,目前程序是根据Safari版本来判断是否原生支持sticky。因此你可以切换到Android系统进行测试,但是真机上是完全正常的交互。
你也可以设置禁用原生支持检测以获得相同的效果::check-sticky-support="false"
如果你没有使用100%
的布局,也没有头部可以直接这样使用
<sticky>
<div>Blabla</div>
</sticky>
如果你像demo一样使用view-box
和x-header
,那么需要这样:
<sticky scroll-box="vux_view_box_body" :offset="46">
<div>Blabla</div>
</sticky>
建议加一个div
高度为内容高度,这样可以避免当定位为sticky
时下面的元素会突然向上走。
// 禁用原生检测时,可以在外围加
<div style="height:44px;">
<sticky scroll-box="vux_view_box_body" :offset="46" :check-sticky-support="false">
<div>Blabla</div>
</sticky>
</div>
// 使用原生检测时,`div`紧挨着组件之后,并设置类名`vux-sticky-fill`
<sticky scroll-box="vux_view_box_body" :offset="46">
<div>Blabla</div>
</sticky>
<div class="vux-sticky-fill" style="height:44px;"></div>
请不要直接照复制 demo 代码,滚动容器为 window 时请不要指定 scroll-box,滚动容器并非使用 view-box
时 id 并不是 vux_view_box_body
,请按照实际情况来设定。
属性
名字 | 类型 | 默认值 | 说明 | 版本要求 |
scroll-box | string | window | 滚动容器,默认为window ,如果你使用了viewbox,那么你需要指定容器id:vux_view_box_body | -- |
check-sticky-support | boolean | true | 是否检测当前浏览器是否支持sticky特性,禁用则在iPhone 设置上也使用scroll 实现 | -- |
offset | number | 0 | 距离顶部高度,在存在头部(如使用了x-header )的情况下需要设置一个距离 | -- |
disabled | boolean | false | 是否禁用,在某些浏览器禁用,比如万恶的 UC | v2.9.0 |
插槽
名字 | 说明 | 版本要求 |
默认插槽 | 内容插槽 | -- |
方法
名字 | 参数 | 说明 | 版本要求 |
bindSticky | 手动重新绑定,用于内容变化导致位置变化定位不再正确的情况 | v2.5.4 |
样式变量
名字 | 默认值 | 说明 | 继承自变量 |
@sticky-zindex | 500 | -- |
重要提示及已知问题
- Q定位位置、时机不正确
出现这个问题可能是由于在 sticky 上方布局存在异步加载内容,比如图片、延迟加载的内容块。
这些情况下需要自己判断正确的加载完成的时机调用
bindSticky
方法。如果知道图片或者延迟加载的区域大小可以直接设置尺寸用以占位,其他情况下要根据实际情况处理。相关 issue: #2564。
- QUC 浏览器下闪烁跳动
UC 浏览器
的 webview 不支持sticky
也无法实时响应onscroll
事件,fixed 定位的元素会在滚动时跳动,暂时无法解决。如果面对的用户群使用 UC 浏览器,建议暂时使用绑定属性
disabled
来禁用功能。data () { return { disabled: typeof navigator !== 'undefined' && /iphone/i.test(navigator.userAgent) && /ucbrowser/i.test(navigator.userAgent) } }
如果你有解决方案,欢迎来 PR 贡献。
相关 issue #2601。