// 页面
<
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
>