Después de los cursos de aprendizaje maestro Huang Yi, quiero utilizar mejor-Scroll resumir. mejor de desplazamiento se utiliza comúnmente en terminal móvil para resolver los plug-ins del balanceo. Hoy en el uso del componente de base que implementa un desplazamiento pueden ser resueltos para obtener la localización en tiempo real de la diapositiva, la carga Raja, desplegable funciones de actualización. Después de componentes abstractos pueden desplazarse con uno proyectos individuales, las funciones pueden seguir mejorando en función de mejor desplazamiento.
- En src / base / scroll.vue
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
<script>
import BScroll from 'better-scroll'
export default {
props: {
data: { // data是scroll需要滚动的数据，data改变时需要触发refresh()刷新
type: Array,
default: null
},
probeType: { // 有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2 的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。
type: Number,
default: 1
},
click: { // false会阻止浏览器的原生 click 事件。当设置为 true，better-scroll 会派发一个 click 事件
type: Boolean,
default: true
},
getScrollPos:{ // 决定是否开启获得滚动的实时坐标
type: Boolean,
default: false
},
pullingDown: { // 是否开启下拉刷新
type: Boolean,
default: false
},
pullingUp: { // 是否开启上拉加载
type: Boolean,
default: false
}
},
mounted() { // 等dom结构渲染完成后再初始化scroll组件
setTimeout(() => {
this._initScroll()
}, 20)
},
methods: {
_initScroll() {
if(!this.$refs.wrapper) {
return
}
this.scroll = new BScroll(this.$ref.wrapper, {
probeType: this.probeType,
click: this.click
})
if(this.getScrollPos) {
this.scroll.on('scroll', (pos) => {
this.$emit('scroll', pos) // 暴露出实时滚动的位置{Object} {x, y}
})
}
if(this.pullingDown) {
this.scroll.on('pullingDown', () => {
this.$emit('pullingDown') // 暴露出下拉刷新动作
})
}
if(this.pullingUp) {
this.scroll.on('pullingUp', () => {
this.$emit('pullingUp') // 暴露出上拉加载动作
})
}
},
refresh() { // 刷新scroll
this.scroll && this.scroll.refresh()
},
scrollTo() { // 滚动到指定位置
this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)
},
scrollToElement() { // 滚动到列表指定元素
this.scroll && this.scroll.scrollToElement(this.scroll, arguments)
},
}
}
</script>
- Use componentes de la aplicación:
<template>
<Scroll :data="list" @scroll="scroll" @pullingDown="pullingDown" @pullingUp="pullingUp">
<ul>
<li v-for="(item, index) in list" :key="index">
<div style="font-size: 20px">{{index}}。{{item}}</div>
</li>
</ul>
</Scroll>
</template>
<script>
import Scroll from '@/base/scroll'
export default {
data() {
return {
item: "data是scroll需要滚动的数据，data改变时需要触发refresh()刷新",
list: []
}
},
created() {
for(let i = 0; i<20; i++) {
this.list.push(this.item)
}
},
methods: {
scroll(pos) {
console.log(pos.x, pos.y)
},
pullingDown() {
this.list = []
for(leti = 0; i<20; i++) {
this.list.push(this.item)
}
},
pullingUp() {
for(leti = 0; i<10; i++) {
this.list.push(this.item)
}
}
},
components: {
Scroll
}
}
</script>
Este artículo se reproduce en el maestro Huang Yi, https: //zhuanlan.zhihu.com/p/27407024
Si desea una demostración de que, ir a buscar a mi fuente GitHub.
https://github.com/Gesj-yean/vue-demo-collection uso documentado más destacados plug-ins. Los estudiantes tienen tiempo para mirar mi blog cima se puede muchas gracias.
