1. 定義每個(gè)彈射的小球組件( ocicle )
2. 組件message自定義屬性存放小球初始信息(可修改)
{ top: "0px", //小球距離上方坐標(biāo) left: "0px", //小球距離左邊坐標(biāo) speedX: 12, //小球每次水平移動(dòng)距離 speedY: 6 //小球每次垂直移動(dòng)距離} 3. 思路
3.1 定時(shí)器設(shè)置小球每一幀移動(dòng)
3.2 初始方向：isXtrue為true則小球?yàn)闄M坐標(biāo)正方向；
isYtrue為true則小球?yàn)榭v坐標(biāo)正方向
3.3 每次移動(dòng)之前獲取小球當(dāng)前坐標(biāo)(oleft,otop)，當(dāng)前坐標(biāo)加上移動(dòng)距離為下一幀坐標(biāo)
3.4 邊界判斷：橫軸坐標(biāo)范圍超過(guò)最大值則加號(hào)變減號(hào)
4. vue知識(shí)點(diǎn)
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 (){ //根據(jù)父組件信息更新小球數(shù)據(jù) this.addStyle.top=this.message.top; this.addStyle.left=this.message.left; this.speedX=this.message.speedX; this.speedY=this.message.speedY; //小球初始坐標(biāo) this.oleft=parseInt(this.addStyle.left); this.otop=parseInt(this.addStyle.top); this.move();}5. 代碼
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> html, body{ padding: 0; margin: 0; width: 100%; height: 100%; } #app{ width: 800px; height: 500px; margin: 50px auto; outline: 1px solid #f69; position: relative; } </style></head><body> <div id="app"> <ocicle :message="message1"></ocicle> <ocicle :message="message2"></ocicle> <ocicle :message="message3"></ocicle> </div> <script src="https://unpkg.com/vue"></script> <script> var tem={ props: ["message"], template: '<div class="article" :style="addStyle"></div>', data: function (){ return { //初始化小球樣式 addStyle: { width: "10px", height: "10px", backgroundColor: "#000", position: "absolute", marginTop: "-5px", marginLeft: "-5px", borderRadius: "50%", top: "0px", left: "0px" }, //橫坐標(biāo)方向的速度 speedX: 0, //縱坐標(biāo)方向的速度 speedY: 0, //isX為真，則在橫坐標(biāo)方向?yàn)檎? isX: true, //isY為真，則在縱坐標(biāo)方向?yàn)檎? isY: true, //小球當(dāng)前坐標(biāo) oleft: 0, otop: 0 } }, mounted: function (){ //根據(jù)父組件信息更新小球數(shù)據(jù) this.addStyle.top=this.message.top; this.addStyle.left=this.message.left; this.speedX=this.message.speedX; this.speedY=this.message.speedY; //小球初始坐標(biāo) this.oleft=parseInt(this.addStyle.left); this.otop=parseInt(this.addStyle.top); this.move(); }, methods: { move: function (){ var self=this; setInterval(function (){ //更新小球坐標(biāo) self.oleft=parseInt(self.addStyle.left); self.otop=parseInt(self.addStyle.top); self.isXtrue(); self.isYtrue(); }, 20); }, //判斷橫坐標(biāo) isXtrue: function (){ //true 橫坐標(biāo)正方向 //false 橫坐標(biāo)負(fù)方向 if(this.isX){ this.addStyle.left=this.oleft+this.speedX+"px"; //寬度超過(guò)最大邊界 if(this.oleft>this.$root.elWidth-5){ this.addStyle.left=this.oleft-this.speedX+"px"; this.isX=false; } }else{ this.addStyle.left=this.oleft-this.speedX+"px"; //寬度超過(guò)最小邊界 if(this.oleft<5){ this.addStyle.left=this.oleft+this.speedX+"px"; this.isX=true; } } }, // 判斷縱坐標(biāo) isYtrue: function (){ //true 縱坐標(biāo)正方向 //false 縱坐標(biāo)負(fù)方向 if(this.isY){ this.addStyle.top=this.otop+this.speedY+"px"; //高度超過(guò)最大邊界 if(this.otop>this.$root.elHeight-5){ this.addStyle.top=this.otop-this.speedY+"px"; this.isY=false; } }else{ this.addStyle.top=this.otop-this.speedY+"px"; //高度超過(guò)最小邊界 if(this.otop<5){ this.addStyle.top=this.otop+this.speedY+"px"; this.isY=true; } } } } } var vm=new Vue({ el: "#app", data: { //獲取el節(jié)點(diǎn)寬高 elWidth: 0, elHeight: 0, //設(shè)置小球初始信息 message1: { top: "0px", left: "600px", speedX: 12, speedY: 6 }, message2: { top: "0px", left: "300px", speedX: 8, speedY: 6 }, message3: { top: "300px", left: "0px", speedX: 13, speedY: 5 } }, //更新el節(jié)點(diǎn)寬高 beforeMount: function (){ this.elWidth=this.$el.clientWidth; this.elHeight=this.$el.clientHeight; }, components: { "ocicle": tem } }) </script></body></html>以上這篇vue組件初學(xué)_彈射小球(實(shí)例講解)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
