3***@qq.com
3***@qq.com
  • 发布:2022-03-04 00:24
  • 更新:2022-03-09 16:14
  • 阅读:368

【报Bug】uni-popup有bug

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: windows10

HBuilderX类型: 正式

HBuilderX版本号: 3.3.11

浏览器平台: Chrome

浏览器版本: 98.0.4758.102(正式版本) (64 位)

项目创建方式: HBuilderX

示例代码:
<template>  
  <view class="test">  
    <view class="dialog">  
      <movable-area>  
        <movable-view direction="horizontal">  
          <view class="box"></view>  
        </movable-view>  
      </movable-area>  
    </view>  

    <uni-popup ref="popup" type="bottom">  
      <view class="dialog">  
        <movable-area>  
          <movable-view direction="horizontal">  
            <view class="box"></view>  
          </movable-view>  
        </movable-area>  
      </view>  
    </uni-popup>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      show: true  
    }  
  },  
  onReady() {  
    this.$refs.popup.open('center')  
  }  
}  
</script>  

<style lang="scss">  
.test {  
  .dialog {  
    width: 200px;  
    background-color: white;  

    movable-area {  
      width: 100%;  
      height: 50px;  
      background-color: yellow;  
      border-radius: 25px;  

      movable-view {  
        width: 50px;  
        height: 50px;  

        .box {  
          width: 50px;  
          height: 50px;  
          border-radius: 25px;  
          background-color: #0f0;  
        }  
      }  
    }  
  }  
}  
</style>  
<template>  
  <view class="test">  
    <view class="dialog">  
      <movable-area>  
        <movable-view direction="horizontal">  
          <view class="box"></view>  
        </movable-view>  
      </movable-area>  
    </view>  

    <uni-popup ref="popup" type="bottom">  
      <view class="dialog">  
        <movable-area>  
          <movable-view direction="horizontal">  
            <view class="box"></view>  
          </movable-view>  
        </movable-area>  
      </view>  
    </uni-popup>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      show: true  
    }  
  },  
  onReady() {  
    this.$refs.popup.open('center')  
  }  
}  
</script>  

<style lang="scss">  
.test {  
  .dialog {  
    width: 200px;  
    background-color: white;  

    movable-area {  
      width: 100%;  
      height: 50px;  
      background-color: yellow;  
      border-radius: 25px;  

      movable-view {  
        width: 50px;  
        height: 50px;  

        .box {  
          width: 50px;  
          height: 50px;  
          border-radius: 25px;  
          background-color: #0f0;  
        }  
      }  
    }  
  }  
}  
</style>

操作步骤:

把上述代码当成一个页面打开。

预期结果:

弹出框中的滑块滑倒右端就后,不应该可以继续滑动了。

实际结果:

弹出框中的滑块滑倒右端后,还可以继续滑动。

bug描述:

页面上使用,可以正常滑倒右侧。(正常)
uni-popup上使用,会滑出边界。(BUG)

2022-03-04 00:24 负责人:无 分享
已邀请:
3***@qq.com

3***@qq.com (作者)

我是想在这个弹出框中实现滑动验证功能。

BoredApe

BoredApe - 有问题就会有答案。

请上传能重现问题的测试工程

  • 3***@qq.com (作者)

    已经上传了。(创建一个新项目,然后拷贝上方的代码,问题就重现了。)

    2022-03-12 20:06

  • 3***@qq.com (作者)

    hello.zip

    2022-03-12 20:07

该问题目前已经被锁定, 无法添加新回复