황 이순신 교사 과정을 학습 한 후, 더 나은 스크롤 요약 사용하고 싶습니다. 더 일반적으로 스크롤 롤링 플러그인을 해결하기 위해 이동 단말기에 사용된다. 구현에 스크롤 슬라이드, 라자 부하의 실시간 위치를 획득하기 위해 해결 될 수있는 기본 컴포넌트, 리프레시 기능 풀다운의 사용에 두세요. 추상화 된 구성 요소가 하나 개의 개별 프로젝트로 스크롤 할 수 있습니다 후, 기능은 더 나은 스크롤에 따라 아래 지속적으로 향상시킬 수 있습니다.
- SRC / 기본 / 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>
- 를 사용하여 응용 프로그램 구성 요소 :
<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>
이 문서는 황 이순신 교사 재현, HTTPS : //zhuanlan.zhihu.com/p/27407024
당신이 그것을 데모를하려면, 내 github에 소스를 얻을 이동합니다.
https://github.com/Gesj-yean/vue-demo-collection 문서화 사용 더 뛰어난 플러그인. 학생들은 대단히 감사합니다 수 있습니다 내 최고 블로그 보는 시간을 갖는다.
