ITPub博客

首页 > 应用开发 > C/C++ > 陪玩平台源码实现类似手机悬浮按钮,需要如何做?

陪玩平台源码实现类似手机悬浮按钮,需要如何做?

C/C++ 作者:云豹科技程序员 时间:2021-10-09 17:20:37 0 删除 编辑
在陪玩平台源码开发中,为了让用户操作起来更方便,需要实现一个类似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/,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2021-03-10

  • 博文量
    275
  • 访问量
    78369