div 设置了touchmove ,结果overflow 不生效了

A_Ghost
  • 7

在开发中,需要给一个div 设置可移动,可展开的功能,展开的内容是超出div的大小。所以,设置了overflow ,但是,overflow 不生效,去掉 touchmove 方法之后,overflow生效了。
代码如下:
HTML部分

<template>
  <div id="stretchBtn" class="stretchBtn"
   @mousedown="down" @touchstart="down"
    @mousemove="move" @touchmove.prevent="move"
    @mouseup="end" @touchend="end"
  >
    <div class="icon">
      <img src="../assets/img/m-min.png" alt="" width="40px" height="40px" />
    </div>
    <div v-show="isClick" class="lineImg">
      <div v-for="(item, index) in apiGame" :key="index" class="divBorder imgSpacing">
        <img v-lazy="item.icon" width="80px" height="80px">
      </div>
    </div>
  </div>
</template>

script部分:


<script>
export default {
  async asyncData(context) {
    const apiGame = await context.app.api.getGameList();
    console.log('asyncData-----Btn', apiGame)
    return { apiGame }
  },
  data() {
    return {
      isClick: false,
      imgSrc: [],
      flags: false,
      position: { x: 0, y: 0 },
      ny: '',
      dy: '',
      yPum: '',
    }
  },
  methods:{
    handleStretch() {
      this.isClick = !this.isClick
      const obj = document.getElementById('stretchBtn')
      if(this.isClick){
        obj.style.width = '100%';
        console.log('111111')
      }else {
        obj.style.width = '';
      }
    },
    // 实现移动端拖拽
    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.dy = odiv.offsetTop;
    },
    move(e){
      if(this.flags){
        let touch ;
        const odiv = e.target;
        event.touches ? touch = event.touches[0] : touch = event
        this.ny = touch.clientY - this.position.y;
        this.yPum = this.dy+this.ny;
        odiv.style.top = this.yPum +"px";
        // 阻止页面的滑动默认事件;如果碰到滑动问题,1.2 请注意是否获取到 touchmove
        document.addEventListener('touchmove', function(event) {
          // 判断默认行为是否可以被禁用
          if (event.cancelable) {
              // 判断默认行为是否已经被禁用
            if (!event.defaultPrevented) {
                event.preventDefault();
            }
          }
        }, false);
      }
    },
    // 鼠标释放时候的函数
    end(){
      this.flags = false;
    },
  }
}
</script>

css 部分:


<style scoped>
.icon{
  display: flex;
  flex-direction: column;
}
.stretchBtn {
  background-color: rgb(236, 203, 113) !important;
  position: fixed;
  top: 0;
  left: 0;
  box-shadow: 0 0 15px #7c7c7eaf;
  border-radius: 15px;
  /* cursor:pointer ; */
  display: flex;
  /* justify-content: center; */
  min-width:60px;
  min-height: 60px;
  z-index: 1000;
  padding: 3px 0;
  display: -webkit-box;
  overflow: auto;
}
.lineImg{
  display: flex;
  width: 100%;
  overflow: auto;
}
.imgSpacing{
  padding: 0 3px;
}
</style>

展示效果:
可上下移动

可左右展开

可是,展开内容就是没办法左右拖动了。。。。。。

请教各位大佬们,什么原因导致,有什么办法能够解决。在此,先谢谢各位大佬们了!!!

回复
阅读 323
1 个回答

通过单独写一个透明的div 悬浮的在要移动的按钮上,调用移动的方法,实现移动,和展开之后的滑动。

<template>
  <div>
    <div class="divMove"  @click="handleStretch"
      @mousedown="down" @touchstart="down"
      @mousemove="move" @touchmove.prevent="move"
      @mouseup="end" @touchend="end"
    >
    </div>
    <div id="stretchBtn" class="stretchBtn"> 
    </div>
  </div>
</template>

修改 move 方法,新增如下代码,将divmove 的位置 赋值给 stretchBtn

move(e){
      if(this.flags){
        const objIcon = document.getElementById('stretchBtn')
        const odiv = e.target;
        odiv.style.top = this.yPum +"px";
        objIcon.style.top = this.yPum +"px";
      }
    },

这样,divmove 和 stretchBtn 能够同时移动,且调用handleStretch 的展开缩回方法也是没有问题的。
最后一步,设置 divmove 的class ,将divmove 层级设为最高,且颜色为透明。divmove其他属性与要移动的stretchBtn 的样式一致就好。

.divMove{
  position: fixed;
  top: 0;
  left: 0;
  min-width:60px;
  min-height: 60px;
  background-color: rgba(255, 255, 255, 0);
  z-index: 1999;
}

最后,虽然问题解决了,但是,出现问题的原因还不知道。
在网上查的时候,有人说,overflow 要为块格式化上下文,要设置 height ,这些我都设置了。但依旧不生效。
个人猜测,有可能是因为,touchmove 和 mousemove 判断的是整个 stretchBtn div,所以在进行左右滑动的时候,执行了touchmove 方法,从而,影响了 overflow,没有对内容进行滑动。现在单独写一个移动方法,只针对 divMove 操作,就不会影响到 整体的stretchBtn了。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏