vue项目调用通用组件_详细解析:uniapp项目|vue组件形式实现的科技感loading纯CSS动效...
前言
本人是一枚并不安分守己的后端程序猿,一直对前端开发“垂涎三尺”,所以,一有机会就会“不务正业”一番。最近,发现了一个非常好的学习资料,于是乎,我的老毛病又犯了,经过一段时间的研究,终于,把这些技能“收入囊中”。但是,本人觉得,这么好的前端学习资料,如果被我“中饱私囊”了,实在是太可惜了。所以呢,我就花了一点时间,为大家解析一下这些炫酷的技能。这篇文章,解析的是一个loading加载的动效,纯CSS的哦。
一、效果展示及思路分析
1.效果展示
2.思路分析
我们可以将该动效拆成两部分来理解:
第一部分 圆形图标以及图标中的进度文字百分比、第二部分 围绕圆形图标转动的圆弧
废话不多说,直接上代码!!
二、实现步骤
1.准备工作
在正式开始写代码之前,需要先下载相应的IDE,以及进行必要的配置工作。
下载Hbuilder X
新建uni-app项目
在pages文件夹下创建home文件夹,在此文件夹下创建home.vue文件
修改配置文件pages.json,设置新创建的home.vue文件为应用启动项
项目根目录下新建components文件夹,在此文件夹下创建CircleLoading.vue自定义组件文件
ok,搞定以上准备工作后,我们就可以开始敲代码了。
2.代码实现
(1)首先,为了演示方便,我们需要在home.vue应用启动页中添加一个布局,如图
(2)引入创建好的自定义vue组件,并注册到当前页面中
(3) 在当前页面中使用自定义vue组件
注意:在使用自定义组件时,需要在最外层再包裹一个view标签,这样做的目的是为了避免在home.vue页面中元素使用了transform样式以后,在自定义vue组件页面样式中元素z-index样式无效的问题。(这个坑,我已经爬过了!o(╥﹏╥)o 大家就不要再往里跳了!放心!这次分享的动效中没有这个坑,大家安心的继续敲代码吧!)
home.vue完整代码
(4)编写自定义vue组件CircleLoading.vue
说明:样式代码并没有考虑浏览器兼容问题,本代码的测试环境是谷歌浏览器。
在模版代码块中,添加uni-app提供的view组件元素(类似于HTML中的div)并设置class属性为circle-loading(嗯,你没有看错,就只有这么一个view组件元素,通过CSS样式就能实现文章开头演示的动效!别着急,继续往下看......)
设置view元素的样式
说明:用到的知识点有“相对定位和绝对定位”、“弹性布局”、border-radius以及box-shadow,如果对这些知识点不是太了解的话,可以去翻一下资料,不难。这里我就不再做过多的解释了。(我第一次看到这些样式代码时,表示也是一脸懵B,没有办法,“不务正业”嘛,还是要付出一定代价的。还好,我还有一点点前端基础,学起来也比较快,终于让我把这段代码搞定!)
利用CSS:before选择器,创建伪元素
分析:创建的这个伪元素实际上和view元素是一样大小的,只不过它们重叠了而已。这个时候,我们只设置了伪元素的上边框的颜色,所以就做出了我们想要的样式。如图:
给伪元素添加CSS3动效
说明:伪元素中添加的animation属性与@keyframes一起使用,从而实现不同的动画效果,0%表示开始动画,100%表示结束动画,当然我们还可以在中间设置新的关键帧,例如:在0%和100%中间再设置一个50%
总结
哎呀,打了这么半天的字,终于把这个动效的实现过程给大家讲完了,怎么样?做出来的效果还不错吧!那么,就让我们简单来总结下这篇文件的知识点。
uni-app项目中如何设置应用启动页,如何创建自定义vue组件以及如何在应用启动页中使用自定义vue组件
编写自定义vue组件中用到了“相对定位与绝对定位”、“弹性布局”、border-radius以及box-shadow
添加CSS3动效时用到的animation属性以及@keyframes规则
以上就是本文中用到的知识点,说一个题外话哈,小凡觉得,这个动效除了以上的知识点以外,最重要的还是如何拆分这个动效,从而来实现它,这个才是最关键的,剩下的就是把拆分的功能做出来就OK了。(嘿嘿,其实后端的很多功能也是这么个思路!突然感觉,我怎么这么优秀呢!咳咳......不小心说出了心声,大家就当没看见我前面的字好了!(*^▽^*))
vue项目调用通用组件_详细解析:uniapp项目|vue组件形式实现的科技感loading纯CSS动效...相关推荐
- div旋转 vue_详细解析:uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言 上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...
- 详细解析:uni-app|vue组件实现茶杯中茶水浮动loading纯CSS动效
前言 前面我已经跟大家分享了[科技感Loading动效]和[水珠晃动Loading动效]两篇文章了,如果大家没有读过,建议大家花一点点时间去看一下,有了前两篇文章的基础后,这次,小凡给大家再分享一个茶 ...
- bootstrap 打印组件_如何在Bootstrap项目中用Vue.js替代jQuery
Bootstrap是 Web 开发最受欢迎的框架之一,没有比它开发响应式网站项目效率最高了. 随着Vue.js的逐渐流行,更多人们用它来控制页面元素,实现强大互动功能.而jQuery出现了一些技术落后 ...
- vue函数如何调用其他函数?_从源码中学Vue(一)生命周期中的钩子函数的那点事儿...
欢迎来到我的<从源码中学Vue>专题系列文章,更多精彩内容持续更新中,欢迎关注 :) Vue作为当下前端最流行的框架之一,在国内占绝对的优势.所以接下来我们一起来学习它吧! 我不会像其它人 ...
- pls-00302: 必须声明 组件_手把手教你开发vue组件库
前言 Vue是一套用于构建用户界面的渐进式框架,目前有越来越多的开发者在学习和使用.在笔者写完 从0到1教你搭建前端团队的组件系统 之后很多朋友希望了解一下如何搭建基于vue的组件系统,所以作为这篇文 ...
- 终端不能联网_详细解析物联网是什么?
原标题:详细解析物联网是什么? 物联网的英文是Internet of Things,缩写为IoT.这里的"物"指的是我身边一切能与网络联通的物品.例如你带的手表.你骑的共享单车.马 ...
- vue 嵌套表格组件_使用form-create动态生成vue自定义组件和嵌套表单组件
使用form-create动态生成vue自定义组件和嵌套表单组件 maker.create 通过建立一个虚拟 DOM的方式生成自定义组件 生成 Maker let rule = [ formCreat ...
- 搜索引擎下拉食云速捷详细_详细解析关键词与搜索引擎之间的霸屏关系
详细解析关键词与搜索引擎之间的霸屏关系 日期:2020-08-17 发布人:tpcqzr 浏览量:22527 下拉词 操作>> 近来众多人聊到啥子是查寻引擎的霸屏,断章取义便是要害词强占 ...
- jboss加载组件_直接从JBoss AS 7组件使用JGroups
jboss加载组件 JGroups是Bela Ban的用于可靠消息交换的软件,该软件高度可配置,可以使用TCP或UDP作为传输协议. 基本上,您在多个客户端上运行JGroup,它们构成一个集群,它们可 ...
最新文章
- EOS开发步骤(2) 钱包操作
- 解决python连接mysql,UTF-8乱码问题
- 【Python】ffmpeg模块查询视频、音频信息
- .net数据库连接池配置技巧(默认值)
- 50. Pow(x, n)(递归,穷举)
- K8S之kubectl命令详解及常用示例??
- 二进制数据与16进制字符串相互转化方法
- 计算机一级考试系统改革,以等级考试为导向的大学计算机改革
- 查看风云三号VIRR地表温度(LST)日产品属性
- L1-8 雀魂majsoul (20 分)
- 模糊查找文件和文件夹
- 【题解】P3387 【模板】缩点
- 笔试面试经历----上海爱立信
- 拂去ThreadLocal的轻纱
- 【GeneXus】在WorkWithPlus中如何定义未被包含的页面属性?
- 广电总局要求所有视频网站TV端APP下架
- padding有两种设置方式:
- checkra1n越狱错误79_苹果越狱工具checkra1n获0.10.1 beta更新:支持iOS 13.4.1
- PDF转Word非常好的网站
- Educational Codeforces Round 81 (Rated for Div. 2)