vue 側邊懸浮 vue實現移動端懸浮窗效果

本文講述，在使用vue的移動端實現類似於iphone的懸浮窗的效果。

相關知識點

touchstart當在螢幕上按下手指時觸發

touchmove 當在螢幕上移動手指時觸發

touchend 當在螢幕上抬起手指時觸發

mousedown mousemove mouseup對應的是pc端的事件

touchcancel當一些更高階別的事件發生的時候(如**接入或者彈出資訊)會取消當前的touch操作，即觸發touchcancel。一般會在touchcancel時暫停遊戲、存檔等操作。

效果圖

實現步驟

1.html

html結構：

你的web頁面

懸浮div

你的web頁面

@mousedown="down" @touchstart="down"

@mousemove="move" @touchmove="move"

@mouseup="end" @touchend="end"}

2.js

data() ,

nx: '', ny: '', dx: '', dy: '', xpum: '', ypum: '',

methods: else else ,false);

//滑鼠釋放時候的函式

end(){

this.flags = false;

3.css

.xuanfu {

height: 4.5rem;

width: 4.5rem;

/* 如果碰到滑動問題，1.3 請檢查 z-index。z-index需比web大一級*/

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;

實現好js邏輯，基本上，問題不大。

您可能感興趣的文章:

vue 側邊懸浮 vue實現移動端懸浮窗效果

本文講述，在使用vue的移動端實現類似於iphone的懸浮窗的效果。相關知識點 touchstart當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發 touchend 當在螢幕上抬起手指時觸發 mousedown mousemove mouseup對應的是pc端的事件 touc...

vue 側邊懸浮 vue實現移動端懸浮窗效果

本文講述，在使用vue的移動端實現類似於iphone的懸浮窗的效果。相關知識點 touchstart當在螢幕上按下手指時觸發 touchmove 當在螢幕上移動手指時觸發 touchend 當在螢幕上抬起手指時觸發 mousedown mousemove mouseup對應的是pc端的事件 touc...

vue實現懸浮按鈕可以隨處移動

1.html 2.再data中定義 data nx ny dx dy xpum ypum 3.js methods onrefresh 1000 down else this.position.x touch.clientx this.position.y touch.clienty this.dx...