Nov
12
2023
js加载中…三个点动态效果
作者:
绝缘体.. 发布:
2023-11-12 06:02 分类:
未分类 阅读:
抢沙发
要在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,通过字符串拼接将加载文本和点符号连接起来,实现点符号的循环切换效果。
jquery 版本如下:
/**
* 三个点的动画效果
* @param obj jquery dom 对象
* @param text
* @returns {*}
*/
function startLoadingAnimation(obj, text) {
const dots = ['. ', '.. ', '...'];
let dotIndex = 0;
setInterval(() => {
dotIndex = (dotIndex + 1) % dots.length;
obj.val(text + dots[dotIndex]);
}, 500);
return obj;
}
使用:
startLoadingAnimation($('#loginBtn'), '登录中').prop({disabled: 'disabled'});
微信扫一扫,打赏作者吧~