uniapp 拖动小图标问题分析经过
uniapp 拖动小图标问题分析经过
添加拖动前
<div class="home">
<div>元素</div>
<div>元素</div>
</div>
<style>
.home {
display: flex;
flex-direction: column;
justify-content: center;
background-color: #D8D8D8;
}
</style>
添加拖动后
<div class="home">
<movable-area class="movable-area">
<div>元素</div>
<div>元素</div>
<movable-view direction="all">拖我</movable-view>
</movable-area>
</div>
现象
- 导致原来的布局错乱
排查
- 是不是拖动组件本来就有 bug 而导致元素内样式错乱
- 网上有不少例子, 没有说到有这个问题
- 是不是本页面布局特殊导致使用组件后布局错乱
- 经逐一排查是由于 .home 使用了 flex 样式造成的
- .movable-area 会造成元素到 .home 的子级, 这就导致原来的 flex 样式没有应用到以前的元素上.
解决方案
- 使用其他拖动库, 难找并不知道能不能用, 不采取
- 重写页面布局方式, 难以调整, 不采取
- 思考组件的其他使用方式, 尝试
考虑两个方向:
- movable-area 只是为了声明一个拖动范围, 那么是不是我在其他结构中声明这个范围也行呢
- 是由于 flex 布局+新元素产生而导致 html 结构变化导致的布局错乱问题
调整后的结构, 其实就是让 movable-area 单独成为一个全屏的可拖动空间, 并使用 position: fixed
脱离原文档流而不影响原来的布局. 经过测试此方案可用.
不过需要注意的是在 h5 中的 100vh 是包含 topBar 的, 而微信小程序不包括.
<div class="home">
<movable-area class="movable-area">
<movable-view direction="all">拖我</movable-view>
</movable-area>
<div>元素</div>
<div>元素</div>
</div>
<style>
.movable-area {
position: fixed;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
z-index: 9;
}
</style>