// 页面
<template>
<div class="avtive-center">
<scroll class="active-content" :data="activeList">
<div>
<div class="banner" @click="to">
<img src="../assets/images/active-banner.png" alt="" />
</div>
<div class="active-center-lists">
<template v-for="(item, index) in activeList">
<active-list :activeList="item" :key="index"></active-list>
</template>
</div>
</div>
</scroll>
</div>
</template>
// scroll 组件
<template>
<div ref="wrapper">
<slot></slot>
</div>
</template>
<script>
import BScroll from "better-scroll";
export default {
props: {
probeType: {
type: Number,
default: 1,
},
click: {
type: Boolean,
default: true,
},
data: {
type: Array,
default: [],
},
refreshDelay: {
type: Number,
default: 20,
},
},
watch: {
data() {
setTimeout(() => {
this._initScroll();
}, this.refreshDelay);
},
},
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,
scrollX: true,
});
},
enable() {
// 如果这个this.scroll 是有的,就调用this.scroll.enable()
this.scroll && this.scroll.enable();
},
disable() {
this.scroll && this.scroll.disable();
},
refresh() {
this.scroll && this.scroll.refresh();
},
},
};
</script>
<style lang="less" scoped></style>