一个很方便的loader----vue-observe-visibility

应用场景一:

代替position: sticky, 这个属性简单来说 可以用来让元素在未超出屏幕高度时保持relative,超出屏幕高度时呈现position: fixed的效果。可以用于实现一些很常见的需求。 但是这个属性目前只有chrome支持的比较好,兼容性不是很好,所以需要替代方案-----vue-observe-visibility。完美解决。

具体看图,注意右边的form。

sticky

 

具体使用方法,就是在组件中引用并注册,如:

import { ObserveVisibility } from 'vue-observe-visibility'

directives: {

    'observe-visibility': ObserveVisibility

},

v-observe-visibility="{

    callback: visibilityChanged,

    intersection: {

    rootMargin: '-63px'

}

更详细的可以看文档 https://www.npmjs.com/package/vue-observe-visibility

Logo

前往低代码交流专区

更多推荐