要在JavaScript中实现加载中的三个点动起来的效果,您可以使用定时器和字符串拼接来实现。下面是一个示例代码:
<template>
<view>{
{ loadingText }}</view>
</template>
<script>
export default {
data() {
return {
loadingText: '加载中'
};
},
mounted() {
this.startLoadingAnimation();
},
methods: {
startLoadingAnimation() {
const dots = ['.', '..', '...'];
let dotIndex = 0;
setInterval(() => {
dotIndex = (dotIndex + 1) % dots.length;
this.loadingText = '加载中' + dots[dotIndex];
}, 500);
}
}
};
</script>
上述代码中,我们定义了一个loadingText
数据属性来存储加载文本,并在mounted
生命周期钩子中调用startLoadingAnimation
方法来启动加载动画。
在startLoadingAnimation
方法中,我们使用setInterval
函数设置一个定时器,每隔500毫秒更新一次loadingText
,通过字符串拼接将加载文本和点符号连接起来,实现点符号的循环切换效果。