当视口在组件上时我想要激活我的功能,我尝试使用:https://github.com/BKWLD/vue-in-viewport-mixin但是不起作用。有人能解释一下我做错了什么吗?谢谢!
<template>
<div class="box has-text-centered" id='count' v-if='inViewport.now'>
/.../
</div>
</template>
<script>
import axios from 'axios';
import * as inViewport from './mixins/vue-in-viewport-mixin';
export default {
name: 'Counter',
data() {
return {
/.../
inViewport: {
now: false
}
}
},
methods: {
count: function() {
const that = this;
setInterval(function() {
if (that.number < that.numberOfLikes) {
that.number += 1
}
}, 1)
}
},
mixins: [inViewport],
watch: {
'inViewport.now': function(visible) {
visible ? this.count() : console.log('not')
}
}
}
</script>
编辑
相反,我使用https://github.com/Akryum/vue-observe-visibility,它的工作原理。
<div class="box has-text-centered" id='count' v-if='inViewport.now'>
/.../
</div>
如果在模板中的根标记处有v-if,则它无法正常工作。尝试将v-if枯萎移动到您调用此组件的父组件,或者移动v-if下面的一个级别,如:
<div class="box has-text-centered" id='count'>
<div v-if='inViewport.now'> /../ </div>
</div>