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>

​