报错提示:
在运行VUE项目的时候出现了以上错误,错误原因是由于better-scroll还未挂载就使用了其on方法。代码如下:
<template>
<div class="wrappers" ref="wrappers">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import Bscroll from "better-scroll";
export default {
name: "Scroll",
data() {
return {
scroll: null,
message: "hahaha",
};
},
props: {
probeType: {
type: Number,
default: 0,
},
//上拉加载更多
pullUpLoad: {
type: Boolean,
default: false,
},
},
mounted() {
//1.创建better-scroll对象
this.$nextTick(() => {
this.scroll = new Bscroll(this.$refs.wrappers, {
pobeType: this.pobeType,
click: true,
pullUpLoad: this.pullLoad, //是否上拉加载更多
});
//3监听是否滚动到底部
});
//2.监听better-scroll的滚动位置
if (this.probeType > 2) {
this.scroll.on("scroll", function (position) {
this.$emit("scroll", position);
});
}
},
};
</script>
<style lang="less" scoped>
</style>
解决办法:
将最后几行代码放入this.$nextTick()中。代码如下:
<template>
<div class="wrappers" ref="wrappers">
<div class="content">
<slot></slot>
</div>
</div>
</template>
<script>
import Bscroll from "better-scroll";
export default {
name: "Scroll",
data() {
return {
scroll: null,
message: "hahaha",
};
},
props: {
probeType: {
type: Number,
default: 0,
},
//上拉加载更多
pullUpLoad: {
type: Boolean,
default: false,
},
},
mounted() {
//1.创建better-scroll对象
this.$nextTick(() => {
this.scroll = new Bscroll(this.$refs.wrappers, {
pobeType: this.pobeType,
click: true,
pullUpLoad: this.pullLoad, //是否上拉加载更多
});
//2.监听better-scroll的滚动位置
if (this.probeType > 2) {
this.scroll.on("scroll", function (position) {
this.$emit("scroll", position);
});
}
//3监听是否滚动到底部
});
},
};
</script>
<style lang="less" scoped>
</style>
以上就是问题的解决,如果觉得不错别忘了点个赞哦^_^。