vue2.x 实现移动音乐播放器——scroll组件

播放器——scroll组件"/>

vue2.x 实现移动音乐播放器——scroll组件

<template><div ref="wrapper"><slot></slot></div>
</template><script type="text/ecmascript-6">
import BScroll from 'better-scroll'export default {props: {probeType: {type: Number,default: 1},// 类型：Number// 默认值：0// 可选值：1、2、3// 作用：有时候我们需要知道滚动的位置。当 probeType 为 1 的时候，会非实时（屏幕滑动超过一定时间后）派发scroll 事件；当 probeType 为 2的时候，会在屏幕滑动的过程中实时的派发 scroll 事件；当 probeType 为 3 的时候，不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件。如果没有设置该值，其默认值为 0，即不派发 scroll 事件。click: {type: Boolean,default: true},listenScroll: {type: Boolean,default: false},data: {type: Array,default: null},// 获得传入的数据，以便数据变化时，重新刷新scrollpullup: {type: Boolean,default: false},beforeScroll: {type: Boolean,default: false},refreshDelay: {type: Number,default: 20}},mounted() {setTimeout(() => {this._initScroll()}, 20)},methods: {_initScroll() {if (!this.$refs.wrapper) {return}this.scroll = new BScroll(this.$refs.wrapper, {probeType: this.probeType,click: this.click})if (this.listenScroll) {let me = thisthis.scroll.on('scroll', (pos) => {me.$emit('scroll', pos)})}if (this.pullup) {this.scroll.on('scrollEnd', () => {if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {this.$emit('scrollToEnd')}})}if (this.beforeScroll) {this.scroll.on('beforeScrollStart', () => {this.$emit('beforeScroll')})}},disable() {this.scroll && this.scroll.disable()},enable() {this.scroll && this.scroll.enable()},refresh() {this.scroll && this.scroll.refresh()},scrollTo() {this.scroll && this.scroll.scrollTo.apply(this.scroll, arguments)},scrollToElement() {this.scroll && this.scroll.scrollToElement.apply(this.scroll, arguments)}},watch: {data() {// 监听数据，当数据变化时，重新刷新scrollsetTimeout(() => {this.refresh()}, this.refreshDelay)}}
}
</script><style scoped lang="stylus" rel="stylesheet/stylus"></style>