无法在这个位置找到: head2.htm
当前位置: 建站首页 > 新闻动态 > 公司新闻 >

微信小程序分销_vue完成简略loading进度条

时间:2021-01-08 14:35来源:微信小程序分销 作者:jianzhan 点击:
vue完成简易loading进展条 本文关键为大伙儿详尽详细介绍了vue完成简易loading进展条,具备一定的参照使用价值,很感兴趣的小伙子伴们能够参照一下初学习vue没多久,今日尝试用
vue实现简单loading进度条       这篇文章主要为大家详细介绍了vue实现简单loading进度条,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

刚学习vue不久,今天试着用vue做了一个简单的loading进度条,对于vue的生命周期和钩子函数又有了新的理解,下面分享给大家,绝对入门级。

一、进度条原理

这个就很简单了,也是我们经常可以用到的,这里只做一个最简单的,页面刷新自动加载进度条。主要是让进度条的width不断增加至100%就可以啦~好了,进入正题。

二、jquery实现

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1" 
 link rel="stylesheet" href="foundation/5.5.3/css/foundation.min.css" rel="external nofollow" rel="external nofollow" 
 link rel="stylesheet" href="assets/foundation-icons/foundation-icons.css" rel="external nofollow" rel="external nofollow" 
 title jq进度条 /title 
 /head 
 body 
 div id="app" 
 div 
 span 0% /span 
 /div 
 /div 

script src="vue/2.4.4/vue.min.js" /script script src="jquery/2.1.1/jquery.min.js " /script script src="foundation/5.5.3/js/foundation.min.js " /script script $(function () { var html = $('.meter'); var htmlW = $('.meter').val(); var styleW = parseInt($('.meter').css('width')); var clearInt = setInterval(function () { styleW++; var styleWW = styleW + '%'; html.css('width', styleWW); (styleWW); if (styleW == 100) { clearInterval(clearInt); }, 20) /script /body /html

三、vue实现

 !DOCTYPE html 
 html lang="en" 
 head 
 meta charset="UTF-8" 
 meta name="viewport" content="width=device-width, initial-scale=1.0" 
 meta http-equiv="X-UA-Compatible" content="ie=edge" 
 title vue进度条 /title 
 link rel="stylesheet" href="foundation/5.5.3/css/foundation.min.css" rel="external nofollow" rel="external nofollow" 
 link rel="stylesheet" href="assets/foundation-icons/foundation-icons.css" rel="external nofollow" rel="external nofollow" 
 style 
 .bar{ 
 color: #fff; 
 text-align: center; 
 /style 
 /head 
 body 
 div id="app" 
 div 
 span :style="{width:proBar+'%',}" {{proBar}} /span 
 /div 
 /div 
 script src="vue/2.4.4/vue.min.js" /script 
 script src="jquery/2.1.1/jquery.min.js " /script 
 script src="foundation/5.5.3/js/foundation.min.js " /script 
 script 
 var app = new Vue({ 
 el: '#app', 
 data: { 
 proBar: 0, 
 created(){ 
 this.change(); 
 methods: { 
 change: function() { 
 var clearInt = setInterval(function() { 
 app.proBar++; 
 console.log(app.prpBar); 
 if (app.proBar == 100) { 
 clearInterval(clearInt); 
 }, 20) 
 /script 
 /body 
 /html 

对比两段代码显然vue要方便许多,因为是双向绑定,不用来回操作dom,就很简单省心啦。

注意问题:刚开始没有实现loading效果,主要是因为用了mounted钩子函数来调用change方法(还是对生命周期理解的不到位)。实现loading效果我们需要在页面加载时自动调用change方法,所以我们应该在数据全部初始化前就执行这一操作。mounted时期已经全部完成初始化,所以便不会成功。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


(责任编辑:admin)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: ajaxfeedback.htm
栏目列表
推荐内容


扫描二维码分享到微信