共计 5382 个字符,预计需要花费 14 分钟才能阅读完成。
因为我的项目须要,想要在某个页面实现一个相似 iPhone 悬浮按钮的性能。
在之前的发问里(链接:div 设置了 touchmove,后果 overflow 不失效了),有写到对于按钮高低挪动的款式,当初欠缺左右挪动的切换以及对应款式的扭转。
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;
}
对于有些图片的地位,间接采纳了 margin 负值和 定位走的。感觉不是很好,心愿看到文章的各路好汉多支支招。在此谢过了。
到此,悬浮按钮的款式算是实现了。
效果图:
就参考你们本人手机上的悬浮按钮吧,嘻嘻。
正文完