2020-3-24 前端達(dá)人
本文講述,在使用VUE的移動(dòng)端實(shí)現(xiàn)類(lèi)似于iPhone的懸浮窗的效果。
相關(guān)知識(shí)點(diǎn)
touchstart 當(dāng)在屏幕上按下手指時(shí)觸發(fā)
touchmove 當(dāng)在屏幕上移動(dòng)手指時(shí)觸發(fā)
touchend 當(dāng)在屏幕上抬起手指時(shí)觸發(fā)
mousedown mousemove mouseup對(duì)應(yīng)的是PC端的事件
touchcancel 當(dāng)一些更高級(jí)別的事件發(fā)生的時(shí)候(如電話接入或者彈出信息)會(huì)取消當(dāng)前的touch操作,即觸發(fā)touchcancel。一般會(huì)在touchcancel時(shí)暫停游戲、存檔等操作。
效果圖
實(shí)現(xiàn)步驟
1.html
總結(jié)了一下評(píng)論,好像發(fā)現(xiàn)大家都碰到了滑動(dòng)的問(wèn)題。就在這里提醒一下吧。可將該懸浮 DIV 同你的 scroller web 同級(jí)。 —- (log: 2018-08-21)
html結(jié)構(gòu): <template> <div>你的web頁(yè)面</div> <div>懸浮DIV</div> </template>
<template> <div id="webId"> ... <div>你的web頁(yè)面</div> <!-- 如果碰到滑動(dòng)問(wèn)題,1.1 請(qǐng)檢查這里是否屬于同一點(diǎn)。 --> <!-- 懸浮的HTML --> <div v-if="!isShow" class="xuanfu" id="moveDiv" @mousedown="down" @touchstart="down" @mousemove="move" @touchmove="move" @mouseup="end" @touchend="end" > <div class="yuanqiu"> {{pageInfo.totalPage}} </div> </div> ... </div> </template>
2.JS
<script> data() { return { flags: false, position: { x: 0, y: 0 }, nx: '', ny: '', dx: '', dy: '', xPum: '', yPum: '', } } methods: { // 實(shí)現(xiàn)移動(dòng)端拖拽 down(){ this.flags = true; var touch; if(event.touches){ touch = event.touches[0]; }else { touch = event; } this.position.x = touch.clientX; this.position.y = touch.clientY; this.dx = moveDiv.offsetLeft; this.dy = moveDiv.offsetTop; }, move(){ if(this.flags){ var touch ; if(event.touches){ touch = event.touches[0]; }else { touch = event; } this.nx = touch.clientX - this.position.x; this.ny = touch.clientY - this.position.y; this.xPum = this.dx+this.nx; this.yPum = this.dy+this.ny; moveDiv.style.left = this.xPum+"px"; moveDiv.style.top = this.yPum +"px"; //阻止頁(yè)面的滑動(dòng)默認(rèn)事件;如果碰到滑動(dòng)問(wèn)題,1.2 請(qǐng)注意是否獲取到 touchmove document.addEventListener("touchmove",function(){ event.preventDefault(); },false); } }, //鼠標(biāo)釋放時(shí)候的函數(shù) end(){ this.flags = false; }, } </script>
3.CSS
<style> .xuanfu { height: 4.5rem; width: 4.5rem; /* 如果碰到滑動(dòng)問(wèn)題,1.3 請(qǐng)檢查 z-index。z-index需比web大一級(jí)*/ z-index: 999; position: fixed; top: 4.2rem; right: 3.2rem; border-radius: 0.8rem; background-color: rgba(0, 0, 0, 0.55); } .yuanqiu { height: 2.7rem; width: 2.7rem; border: 0.3rem solid rgba(140, 136, 136, 0.5); margin: 0.65rem auto; color: #000000; font-size: 1.6rem; line-height: 2.7rem; text-align: center; border-radius: 100%; background-color: #ffffff; } </style>
實(shí)現(xiàn)好JS邏輯,基本上,問(wèn)題不大。
本文鏈接 http://www.luyixian.cn/javascript_show_166242.aspx
再加一點(diǎn)
css之display:inline-block布局
1.解釋一下display的幾個(gè)常用的屬性值,inline , block, inline-block
兩個(gè)圖可以看出,display:inline-block后塊級(jí)元素能夠在同一行顯示,有人這說(shuō)不就像浮動(dòng)一樣嗎。沒(méi)錯(cuò),display:inline-block的效果幾乎和浮動(dòng)一樣,但也有不同,接下來(lái)講一下inline-block和浮動(dòng)的比較。
2.inline-block布局 vs 浮動(dòng)布局
a.不同之處:對(duì)元素設(shè)置display:inline-block ,元素不會(huì)脫離文本流,而float就會(huì)使得元素脫離文本流,且還有父元素高度坍塌的效果
b.相同之處:能在某程度上達(dá)到一樣的效果
我們先來(lái)看看這兩種布局:
圖一:display:inline-block
圖二:
對(duì)兩個(gè)孩子使用float:left,我在上一篇浮動(dòng)布局講過(guò),這是父元素會(huì)高度坍塌,所以要閉合浮動(dòng),對(duì)box使用overflow:hidden,效果如下:
>>乍一看兩個(gè)都能做到幾乎相同的效果,(仔細(xì)看看display:inline-block中有間隙問(wèn)題,這個(gè)留到下面再講)
c.浮動(dòng)布局不太好的地方:參差不齊的現(xiàn)象,我們看一個(gè)效果:
圖三:
圖四:
>>從圖3,4可以看出浮動(dòng)的局限性在于,若要元素排滿一行,換行后還要整齊排列,就要子元素的高度一致才行,不然就會(huì)出現(xiàn)圖三的效果,而inline-block就不會(huì)。
3.inline-block存在的小問(wèn)題:
a.上面可以看到用了display:inline-block后,存在間隙問(wèn)題,間隙為4像素,這個(gè)問(wèn)題產(chǎn)生的原因是換行引起的,因?yàn)槲覀儗?xiě)標(biāo)簽時(shí)通常會(huì)在標(biāo)簽結(jié)束符后順手打個(gè)回車(chē),而回車(chē)會(huì)產(chǎn)生回車(chē)符,回車(chē)符相當(dāng)于空白符,通常情況下,多個(gè)連續(xù)的空白符會(huì)合并成一個(gè)空白符,而產(chǎn)生“空白間隙”的真正原因就是這個(gè)讓我們并不怎么注意的空白符。
b.去除空隙的方法:
1.對(duì)父元素添加,{font-size:0},即將字體大小設(shè)為0,那么那個(gè)空白符也變成0px,從而消除空隙
現(xiàn)在這種方法已經(jīng)可以兼容各種瀏覽器,以前chrome瀏覽器是不兼容的
圖一:
c.瀏覽器兼容性:ie6/7是不兼容 display:inline-block的所以要額外處理一下:
在ie6/7下:
對(duì)于行內(nèi)元素直接使用{dislplay:inline-block;}
對(duì)于塊級(jí)元素:需添加{display:inline;zoom:1;}
4.總結(jié):
display:inline-block的布局方式和浮動(dòng)的布局方式,究竟使用哪個(gè),我覺(jué)得應(yīng)該根據(jù)實(shí)際情況來(lái)決定的:
a.對(duì)于橫向排列東西來(lái)說(shuō),我更傾向與使用inline-block來(lái)布局,因?yàn)檫@樣清晰,也不用再像浮動(dòng)那樣清除浮動(dòng),害怕布局混亂等等。
b.對(duì)于浮動(dòng)布局就用于需要文字環(huán)繞的時(shí)候,畢竟這才是浮動(dòng)真正的用武之地,水平排列的是就交給inline-block了。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.miumiuwan.com