npm install vv-sticky
移动端需要滚动吸顶的业务场景
如果你能只用 CSS 那显然是相当好的,但是兼容性是相当可悲的,
所以搭配JS做了一个能力检查,一个插件能解决了,一了百了
import VVSticky from 'vv-sticky'
Vue.use(VVSticky)
1.插件模式
// main.js
import VVSticky from 'vv-sticky'
Vue.directive('sticky', stickyD)
// app.vue
<template>
<section v-sticky="stickyConfig">{{msg}}</section>
</template>
<script>
export default {
name: 'demo',
data () {
return {
stickyConfig: {
zIndex: 10,
stickyTop: 0
},
msg: 'Welcome'
}
}
}
</script>
2.指令模式
// app.vue
<template>
<section v-sticky="stickyConfig">{{msg}}</section>
</template>
<script>
import VVSticky from 'vv-sticky'
export default {
name: 'demo',
directives: {
'sticky': VVSticky
},
data () {
return {
stickyConfig: {
zIndex: 10,
stickyTop: 0
},
msg: 'Welcome'
}
}
}
</script>
Copyright (c) 2018-present, Yejunnan (Liu) You