在uniapp/vue中如何实现固定第三节桌腿位置的桌子升降效果？-css教程-PHP中文网

在uniapp/vue中如何实现固定第三节桌腿位置的桌子升降效果？

心靈之曲

发布： 2025-03-15 08:30:01

原创

867人浏览过

在uniapp/vue中如何实现固定第三节桌腿位置的桌子升降效果？

Uniapp/Vue中实现固定第三节桌腿的桌子升降效果

本文介绍如何在Uniapp/Vue项目中实现一种特殊的桌子升降效果：保持第三节桌腿位置不变，而只调整第一、二节桌腿的高度。整个过程需要保持桌子和三节桌腿的连接。

原代码中，三节桌腿高度会同步变化。为了实现目标效果，我们需要固定第三节桌腿，并通过调整第一、二节桌腿高度来模拟升降。解决方案主要在于CSS布局的调整。

以下为关键代码修改：

<div class="table-bottom">
  <div :style="{height: legheight1 + 'px'}" class="leg"></div>
  <div :style="{height: legheight2 + 'px'}" class="leg"></div>
  <div class="leg fixed-leg" style="height: 50px;"></div>
</div>

登录后复制

/* 调整桌子底部布局 */
.table-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative; /* 关键：设置相对定位 */
}

/* 固定第三节桌腿 */
.fixed-leg {
  position: absolute;
  bottom: 0;
  width: 40px; /*  调整宽度，确保视觉效果一致 */
}

/* 其他桌腿样式 */
.leg {
  width: 30px; /* 确保与固定桌腿宽度协调 */
}

登录后复制

代码修改说明：

立即学习“前端免费学习笔记（深入）”；

.table-bottom 增加了 position: relative; ，使其成为子元素的定位容器。
.fixed-leg 使用 position: absolute; 和 bottom: 0; 将第三节桌腿固定在 .table-bottom 的底部。同时调整了宽度，使其与其他桌腿视觉上保持一致。
.leg 调整了宽度，与 .fixed-leg 宽度协调。

JavaScript部分无需大幅修改，只需确保 legheight1 和 legheight2 变量能够正确响应用户交互（例如触摸事件），动态调整第一、二节桌腿的高度即可。

通过以上CSS布局调整，即可实现第三节桌腿位置固定，第一、二节桌腿高度变化的升降效果，同时保持整个桌子的完整性。请注意调整 .leg 和 .fixed-leg 的宽度，以获得最佳视觉效果。

以上就是在uniapp/vue中如何实现固定第三节桌腿位置的桌子升降效果？的详细内容，更多请关注php中文网其它相关文章！