I'm new in Vuejs, I'm using vue-countup-v2 npm package I install it, then import it in my Vue component, it's work perfect when I load the page but the point is I want to call the component CountUp when scroll down the screen not when I load the page. in the vu-countup-v2 package, there is a method called start() I can trigger it but I don't know-how.
here is the code:
<template>
<div id="main-wrapper" class="flex justify-around w-full p-12 my-12">
<CountUp
id="count-up"
:delay="delay"
:endVal="endVal[index]"
:options="options"
/>
</div>
</template>
<script>
import CountUp from 'vue-countup-v2';
import inViewport from 'in-viewport';
export default {
name: "NumberAnime",
components: {
CountUp,
},
data() {
return {
delay: 1000,
endVal: [40, 300000, 25000, 350],
options: {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: '',
}
}
},
mounted() {
inViewport('elementId', 'the function I want to callback')
},
}
</script>
I solved the issue for anyone who needs know-how in the future:
make a v-if condition false in the count tag and when scrolling down make the condition true to start running
<div id="before_count_div" class="text-4xl flex items-end">
<CountUp
v-if="options.begin == true"
id="count"
:delay="delay"
:endVal="endVal[index]"
:options="options"
/>
</div>
in the data:
options: {
useEasing: true,
useGrouping: true,
separator: ',',
decimal: '.',
prefix: '',
suffix: '',
begin: false,
}
in the mounted:
mounted() {
const el = document.getElementById('before_count_div');
inViewport(el, () => {
this.options.begin = true;
})
},
if i understand correctly, use ref maybe word
<CountUp
ref="count"
/>
this.$refs.count.start()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.