load-vue(定制化+趣味性的加载动画插件)
2020/5/17 11:26:23
本文主要是介绍load-vue(定制化+趣味性的加载动画插件),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
背景介绍:
大家好,我是六六。经过测试,一款加载动画插件完美发布。写这个插件的初衷有两点,第一就是加载loading的有趣性,在加载过程变的有趣,大大地提升用户体验感。第二就是定制化,开发者可以根据自己的需求随意改变动画的大小,颜色,速度等。已经成功运用在我的仿蘑菇街商城项目里面运行了,效果还是ok的。如果大家觉得可以欢迎使用哦,如果有什么问题或建议随时call我。我会及时改进的。同时如果你们有更好的素材也可以分享给我,目前素材比较少,好了来看看效果吧。
使用:
1.安装:
npm install load-vue --save 复制代码
2.使用注意:
使用模板方式的话,一定要将isShow先置为false,在通过js使isShow变成true.(我是通过观察isShow变化启动动画的)
loading功能:
1.
使用方法及参数说明:
2.
使用方法及参数说明:
3.
使用方法及参数说明:
4.
使用方法及参数说明:
5.
使用方法及参数说明:
6.
使用方法及参数说明:
开发遇到的问题:
1.已解决
问题:使用setInterval会造成卡顿。
解决:使用requestAnimationFrame函数。(推荐做动画的函数)
2.已解决
问题:重复获取canvas对象。
解决:启动动画前获取一次就好。
3.已解决
问题:未实现编程式组件。
解决:通过extend构造器实现。
4.已解决(效果不是很好)
问题:不能对vue外面的构造函数传参。
解决:通过localstrange实现数据共享。
5.未解决|通过Map数据结构
问题:大量的if判断数据溢出,判断运动状态。
6.已解决
问题:有加载条时 当组件隐藏时,需要对数据进行初始化 ,其实就是对vue数据进行初始化。
解决:Object.assign(this.$data, this.$options.data())
7.终极解决方案
问题:无法获取canvas对象。
解决:使用v-if组件无法获取canvas对象 使用v-show会影响到页面,通过wacth对isShow进行观察,在通过$nextTick获取ctx。
8.导入导出问题
问题:不如其他插件那么雅观
解决:熟悉es6导入导出规范后可以解决。
9.以解决
问题:多次调用动画,动画累加
解决:观测isShow为false时,通过cancelAnimationFrame取消动画。
结束
我会一直更新维护这个插件的,现在素材比较少,我相信,总有一天,会成功的。
大家也多提意见,让这个插件会越来越好的。
github地址:点击进入github
这篇关于load-vue(定制化+趣味性的加载动画插件)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南