After learning courses Huang Yi teacher, I want to use better-scroll summarize. better-scroll is commonly used in mobile terminal to solve the Rolling plug-ins. Today on the use of the base component that implements a scroll can be solved to obtain real-time location of the slide, the Raja load, pull-down refresh functions. After abstracted components can scroll with one individual projects, functions can continue to improve down according to better-scroll.
- In 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 application components:
<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>
This article is reproduced in Huang Yi teacher, https: //zhuanlan.zhihu.com/p/27407024
If you want to demo it, go get my github source.
https://github.com/Gesj-yean/vue-demo-collection documented use more outstanding plug-ins. Students have time to look at my top blog can thank you very much.
