陪玩平臺原始碼實現類似手機懸浮按鈕，需要如何做？
在陪玩平臺原始碼開發中，為了讓使用者操作起來更方便，需要實現一個類似iPhone懸浮按鈕的功能，該功能的實現需要注意的細節點還是很多的，今天我們主要來了解一下懸浮按鈕如何實現左右移動的切換以及對應樣式的改變。
HTML程式碼：
<template>
<div style=" touch-action: none;">
<div id="divMove" :class="!isClick && 'divMove' " @click="handleStretch"
@mousedown="down" @touchstart="down"
@mousemove="move" @touchmove.prevent="move"
@mouseup="end" @touchend="end"
>
</div>
<div id="stretchBtn" :class="positionNow =='right'? 'stretchBtn showStyle' : 'stretchBtn showStyleLeft'" >
<div id="iconImg" class="iconImg" >
<div v-if="!isClick" id="imgM">
<div id="backBtn" :class="positionNow =='right'? 'backBtn' : 'backBtnLeft' "></div>
<div id="backBtnM" class="backBtnM" :style="positionNow =='right'? 'margin-left:15px' : 'margin-left:30px; transform: rotateY(0) ' "></div>
</div>
</div>
<div v-if="isClick" :class="positionNow =='right'? 'toIndex' : 'toIndexLeft'" >
<img src="../assets/img/zhuye.png" width="100%" height="35px">
</div>
<div v-if="isClick" id="lineImg" class="lineImg" :style="positionNow ==='right'? 'margin-right: 5px' : 'margin-right: 5px' ">
<div v-for="(item, index) in imgSrc" :key="index" class="divBorder imgSpacing">
<img :src="item.icon" width="30px" height="30px" style="border-radius:5px">
</div>
</div>
<div v-if="isClick" id="shouqi" :class="positionNow =='right'? 'shouqi' : 'shouLeft'" >
<img :src="positionNow === 'right' ? require('../assets/img/shouqi.png') : require('../assets/img/shouLeft.png')"
alt="" width="10px" height="20px" @click="handleStretch" />
</div>
</div>
</div></template>
一開始想要通過 document.getElementById() 去更改樣式，但是在切換的時候，會造成陪玩平臺原始碼的延遲。於是採用了 v-bind 判斷當前懸浮按鈕位置，進而渲染不同的樣式。
JavaScript程式碼：
// 實現移動端拖拽
down(e){
this.flags = true;
let touch;
const odiv = e.target;
event.touches ? touch = event.touches[0] : touch = event;
this.position.y = touch.clientY;
this.position.x = touch.clientX;
this.dy = odiv.offsetTop;
this.dX = odiv.offsetLeft;
const objImgM = document.getElementById('imgM');
objImgM && (objImgM.style.opacity = '1');
},
move(e){
if(this.flags){
let touch ;
const objStratch = document.getElementById('stretchBtn');
const objIconImg = document.getElementById('iconImg');
const odiv = e.target;
event.touches ? touch = event.touches[0] : touch = event;
this.ny = touch.clientY - this.position.y;
this.nx = touch.clientX - this.position.x;
this.yPum = this.dy+this.ny;
this.XPum = this.dX+this.nx;
odiv.style.top = this.yPum +"px";
objStratch.style.top = this.yPum +"px";
odiv.style.left = this.XPum +"px";
objIconImg.style.left = this.XPum +"px";
// 阻止頁面的滑動預設事件；如果碰到滑動問題，1.2 請注意是否獲取到 touchmove
document.addEventListener('touchmove', function(event) {
// 判斷預設行為是否可以被禁用
if (event.cancelable) {
// 判斷預設行為是否已經被禁用
if (!event.defaultPrevented) {
event.preventDefault();
}
}
}, false);
}
},
// 滑鼠釋放時候的函式
end(e){
this.flags = false;
const objImgM = document.getElementById('imgM');
objImgM && (objImgM.style.opacity = '0.7');
// 判斷 左右移動
if(this.XPum){
// 移動之後才會有值。
this.XPum < (window.screen.width / 2 ) ? this.positionNow = 'left' : this.positionNow = 'right';
}
this.setBtnPosition();
},
setBtnPosition() {
const objStratch = document.getElementById('stretchBtn');
const objMove = document.getElementById('divMove');
const objIconImg = document.getElementById('iconImg');
if(this.positionNow === 'left'){
// console.log('在左側~~~~~~')
objMove.style.left = '0';
objStratch.style.left = '0';
objIconImg.style.left = '0';
}else{
const positionMove = window.screen.width - 70;
const positionIconImg = window.screen.width - 70;
const positionStratch = window.screen.width - 190;
objMove.style.left = `${positionMove}px`;
objStratch.style.left = `${positionStratch}px`;
objIconImg.style.left = `${positionIconImg}px`;
}
},
與陪玩平臺原始碼實現懸浮按鈕的上下移動多了幾點：
1，X軸的位置變化，及其賦值。如下所示：
//down(e) this.dX = odiv.offsetLeft; // move(e) this.XPum = this.dX+this.nx; odiv.style.left = this.XPum +"px"; objIconImg.style.left = this.XPum +"px";
2，陪玩平臺原始碼按鈕半透明樣式切換
預設值為：0.7，點下 為1 ，鬆開變回0.7
// down(e)
const objImgM = document.getElementById('imgM');
objImgM && (objImgM.style.opacity = '1');
// move(e)
const objImgM = document.getElementById('imgM');
objImgM && (objImgM.style.opacity = '0.7')
3，左右位置的判斷，主要就是 setBtnPosition() 這個方法。
當在右邊的時候，直接獲取螢幕寬度 減去 當前div的寬度。
之前有想要去除 left，設定 right=0，但是沒有生效。
css程式碼：
.stretchBtn {
position: fixed;
top: 0;
right: 0;
display: flex;
flex-direction: row-reverse;
z-index: 1000;
max-height: 100px;}.iconImg{
position: fixed;
display: flex;
flex-direction: row-reverse;
justify-content: center;}#imgM{
opacity: 0.7;
width: 60px;}.backBtnM{
height: 30px;
background: url('~/assets/img/gamePlay/icon2.png') no-repeat;
background-size: 25px 25px;
margin-top: -40px;
margin-left: 15px;}.backBtn{
width: 70px;
height: 48px;
background: url('~/assets/img/gamePlay/back-btn2.png') no-repeat;
background-size: 237%;}.backBtnLeft{
width: 70px;
height: 48px;
background: url('~/assets/img/gamePlay/back-btn2.png') no-repeat;
background-size: 237%;
transform: rotateY(180deg);}.showStyle{
width: 195px;
background: url('~/assets/img/gamePlay/back-btn2.png') no-repeat;
background-size: 100% 50px;}.showStyleLeft{
width: 195px;
background: url('~/assets/img/gamePlay/back-btn.png') no-repeat;
background-size: 100% 50px;}.lineImg{
display: flex;
flex-direction: row-reverse;
overflow-x: auto;
height: 50px;
margin-top: 8px;
z-index: 1999;}.lineImg::-webkit-scrollbar { width: 0 !important }.imgSpacing{
padding: 0 3px;}.divMove{
position: fixed;
right: 0;
width:70px;
height: 43px;
background-color: rgba(214, 106, 106, 0);
z-index: 1999;}.shouqi{
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
height: 50px;
margin-top:-2px}.shouLeft{
display: flex;
justify-content: center;
align-items: center;
margin-right: -128px;
height: 50px;
margin-top:-2px}.toIndex{
margin-top: 5px;
margin-right: 15px;}.toIndexLeft{
position: relative;
left: -150px;
margin-top: 5px;}
以上便是“陪玩平臺原始碼開發，如何實現類似手機懸浮按鈕樣式？”的全部內容，在陪玩平臺原始碼開發時為了優化使用者的使用體驗需要探索的功能有很多，希望以上內容能給大家一些幫助。
本文轉載自網路，轉載僅為分享乾貨知識，如有侵權歡迎聯絡雲豹科技進行刪除處理
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69996194/viewspace-2795164/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 專案需要實現按鈕懸浮的功能, 實現後的記錄
- 利用css變數實現按鈕懸浮效果CSS變數
- css3實現的滑鼠懸浮按鈕動畫效果CSSS3動畫
- 用 Go + Redis 實現陪玩平臺原始碼中的分散式鎖GoRedis原始碼分散式
- css3程式碼實現的滑鼠懸浮按鈕效果程式碼例項CSSS3
- 實現浮動按鈕 (轉)
- 陪玩平臺原始碼中的排序演算法，插入排序的實現原始碼排序演算法
- 遊戲陪玩平臺原始碼開發，依賴收集和觸發的實現遊戲原始碼
- 語音陪玩原始碼如何做到不卡頓？原始碼
- 滑鼠懸浮按鈕背景變色效果程式碼例項
- css3實現的滑鼠懸浮立體動態按鈕效果CSSS3
- CSS3滑鼠懸浮動畫按鈕效果CSSS3動畫
- 使用者互動聊天，看陪玩平臺原始碼怎麼透過html實現原始碼HTML
- CSS3滑鼠懸浮交叉線效果按鈕CSSS3
- 遊戲陪玩app開發，前端實現一個輪詢需要如何做？遊戲APP前端
- Flutter總結之懸浮按鈕FloatingActionButton使用Flutter
- 懸浮按鈕點選回到頂部FloatingActionButton
- 遊戲陪玩平臺原始碼開發，聊天室內的禮物連擊效果的實現遊戲原始碼
- 直播平臺搭建原始碼，qt自定義滑動按鈕原始碼QT
- 乾貨分享！懸浮按鈕設計規範和經典實踐
- 類似網路螞蟻的懸浮窗體 (轉)
- iOS - 新增一個全域性懸浮按鈕(整合pods版)iOS
- Android實現仿360手機衛士懸浮窗效果Android
- 手機直播原始碼，點選按鈕，立即回到頂部原始碼
- 手機直播原始碼，Flutter 中的彈簧按鈕效果原始碼Flutter
- Spring Boot + Redis 解決陪玩平臺原始碼重複提交問題Spring BootRedis原始碼
- 如何在遊戲陪玩系統原始碼中實現“刮刮樂”效果？遊戲原始碼
- 如何實現遊戲陪玩系統原始碼前端效能監控？遊戲原始碼前端
- （原創）【MAUI】一步一步實現“懸浮操作按鈕”（FAB，Floating Action Button）UI
- 關於遊戲陪玩系統原始碼後臺管理系統，需要思考的二三事遊戲原始碼
- 提升陪玩平臺原始碼的整體效能，MySQL資料庫如何優化？原始碼MySql資料庫優化
- 前端陪玩平臺原始碼管理是否得當，可以從哪些方面考證？前端原始碼
- 如何使用 Redis 實現 陪玩原始碼中“附近的人” 這一功能？Redis原始碼
- 使用自定義 View 繪製一個懸浮式可拖拽按鈕View
- 有類似 比心 陪玩的小程式原始碼的朋友，拿出來我們一起研究啊原始碼
- 陪玩系統原始碼實現音訊編碼的相關步驟原始碼音訊
- 如何用分散式鎖解決陪玩平臺原始碼中的併發問題？分散式原始碼
- 遊戲陪玩原始碼的移動端適配，應該如何實現？遊戲原始碼