布局 - sticky - 《VUX 2.x 组件文档》

安装

局部注册

全局注册

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，请按照实际情况来设定。

API

属性

名字	类型	默认值	说明	版本要求
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 方法。如果知道图片或者延迟加载的区域大小可以直接设置尺寸用以占位，其他情况下要根据实际情况处理。

发布日志

v2.9.0 [feature] 添加属性 disabled #2601
v2.9.0 [enhance] scroll-box 不存在时在开发模式下进行提示
v2.7.7 [fix] 修复定位不准确和定位无效的问题 #2367
v2.5.9 [fix] 修复 scrollTop 总是返回0的问题 #1827
v2.5.4 [fix] 在 router-view 动画结束后自动重新绑定
v2.5.4 [fix] 修复在ios上fixed不生效的问题 #1657
v2.1.1-rc.1 [fix] 修复路由间有过渡动画导致顶部距离计算不准确的问题
v2.1.1-rc.1 [enhance] 设置 z-index 避免被覆盖 #976 @olymk

sticky

Sticky

安装

属性

插槽

方法

样式变量

重要提示及已知问题

相关 issue

贡献者

发布日志