vue组件如何实现弹射小球-创新互联
这篇文章将为大家详细讲解有关vue组件如何实现弹射小球,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
我们一直强调网站设计制作、网站建设对于企业的重要性,如果您也觉得重要,那么就需要我们慎重对待,选择一个安全靠谱的网站建设公司,企业网站我们建议是要么不做,要么就做好,让网站能真正成为企业发展过程中的有力推手。专业网络公司不一定是大公司,成都创新互联公司作为专业的网络公司选择我们就是放心。1. 定义每个弹射的小球组件( ocicle )
2. 组件message自定义属性存放小球初始信息(可修改)
{ top: "0px", //小球距离上方坐标 left: "0px", //小球距离左边坐标 speedX: 12, //小球每次水平移动距离 speedY: 6 //小球每次垂直移动距离 }
3. 思路
3.1 定时器设置小球每一帧移动
3.2 初始方向:isXtrue为true则小球为横坐标正方向;
isYtrue为true则小球为纵坐标正方向
3.3 每次移动之前获取小球当前坐标(oleft,otop),当前坐标加上移动距离为下一帧坐标
3.4 边界判断:横轴坐标范围超过大值则加号变减号
4. vue知识点
4.1 父子组件传递信息使用props
4.2 模板编译之前获取el宽高
beforeMount: function (){ this.elWidth=this.$el.clientWidth; this.elHeight=this.$el.clientHeight; }
4.3 子组件获取el宽高 ( this.$root.elWidth,this.$root.elHeight )
4.4 模板编译完成后更新子组件信息
mounted: function (){ //根据父组件信息更新小球数据 this.addStyle.top=this.message.top; this.addStyle.left=this.message.left; this.speedX=this.message.speedX; this.speedY=this.message.speedY; //小球初始坐标 this.oleft=parseInt(this.addStyle.left); this.otop=parseInt(this.addStyle.top); this.move(); }
5. 代码
Document
关于“vue组件如何实现弹射小球”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网页题目:vue组件如何实现弹射小球-创新互联
分享链接:http://scyanting.com/article/djicph.html