js加载中...三个点动态效果

要在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,通过字符串拼接将加载文本和点符号连接起来,实现点符号的循环切换效果。

猜你喜欢

转载自blog.csdn.net/qq_43770056/article/details/131718424