VUE移动端音乐APP学习【四】:scroll组件及loading组件开发

制作scroll 组件,然后嵌套一个 DOM 节点,使得该节点就能够滚动。该组件中需要引入 BetterScroll 插件。

scroll.vue:

<template> <div ref="wrapper"> <slot></slot> </div> </template> <script> import BScroll from 'better-scroll'; export default { name: 'scroll', props: { probeType: { type: Number, default: 1, }, click: { type: Boolean, default: true, }, listenScroll: { type: Boolean, default: false, }, data: { type: Array, default: null, }, }, mounted() { setTimeout(() => { this._initScroll(); }, 20); }, methods: { _initScroll() { if (!this.$refs.wrapper) { // eslint-disable-next-line no-useless-return return; } this.scroll = new BScroll(this.$refs.wrapper, { probeType: this.probeType, click: this.click, }); if (this.listenScroll) { let me = this; this.scroll.on('scroll', (pos) => { me.$emit('scroll', pos); }); } }, disable() { this.scroll && this.scroll.disable(); }, enable() { this.scroll && this.scroll.enable(); }, refresh() { this.scroll && this.scroll.refresh(); }, }, watch: { data() { setTimeout(() => { this.refresh(); }, this.refreshDelay); }, }, }; </script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wssjjg.html