<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>
- 发布:2022-03-04 00:24
- 更新:2022-03-09 16:14
- 阅读:368
产品分类: uniapp/H5
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: windows10
HBuilderX类型: 正式
HBuilderX版本号: 3.3.11
浏览器平台: Chrome
浏览器版本: 98.0.4758.102(正式版本) (64 位)
项目创建方式: HBuilderX
示例代码:
操作步骤:
把上述代码当成一个页面打开。
把上述代码当成一个页面打开。
预期结果:
弹出框中的滑块滑倒右端就后,不应该可以继续滑动了。
弹出框中的滑块滑倒右端就后,不应该可以继续滑动了。
实际结果:
弹出框中的滑块滑倒右端后,还可以继续滑动。
弹出框中的滑块滑倒右端后,还可以继续滑动。
bug描述:
页面上使用,可以正常滑倒右侧。(正常)
uni-popup
上使用,会滑出边界。(BUG)