Uniapp/Vue中实现固定第三节桌腿的桌子升降效果
本文介绍如何在Uniapp/Vue项目中实现一种特殊的桌子升降效果：保持第三节桌腿位置不变，而只调整第一、二节桌腿的高度。 整个过程需要保持桌子和三节桌腿的连接。
原代码中，三节桌腿高度会同步变化。为了实现目标效果，我们需要固定第三节桌腿，并通过调整第一、二节桌腿高度来模拟升降。 解决方案主要在于CSS布局的调整。
以下为关键代码修改：
/* 调整桌子底部布局 */
.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 的宽度，以获得最佳视觉效果。
