Uniapp/Vue中实现带固定桌腿的桌子升降效果
本文介绍如何在Uniapp/Vue项目中实现桌子升降效果，并保持第三节桌腿位置固定。 我们将修改现有代码，使第一、二节桌腿高度可调，而第三节桌腿始终保持底部固定位置。
问题描述
现有代码中，所有桌腿高度会同步变化。我们需要修改，使第三节桌腿位置不变，第一、二节桌腿高度根据用户滑动操作调整，且三节桌腿始终连接，呈现升降效果。
代码改进
CSS修改:
为了固定第三节桌腿，我们需要调整.table-bottom和第三节桌腿的样式。我们将使用position: absolute;和bottom: 0;来确保第三节桌腿始终位于底部。 同时，table-bottom的高度需要动态计算，以适应桌腿高度变化。
.table-bottom {
position: relative; /* 关键：设置table-bottom为相对定位 */
display: flex;
flex-direction: column;
align-items: center;
/* height: calc(100% - 50px); 这行可以移除，由JS动态控制 */
}
.leg:nth-child(3) {
position: absolute;
bottom: 0;
height: 50px;
width: 40px;
}
JavaScript修改:
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
在onTouchMove方法中，我们需要调整legHeight1和legHeight2的值，并计算table-bottom的高度，以确保整体效果。 以下是一个修改后的示例，假设tableTop代表桌面的高度，legHeight1和legHeight2分别代表第一、二节桌腿的高度：
onTouchMove(event) {
let touchMoveY = event.touches[0].clientY;
let distance = touchMoveY - this.touchStartY;
// 设置高度变化限制，避免桌腿高度小于0或超出范围
let minHeight = 0;
let maxHeight = 196; // 替换为你的最大高度
this.tableTop = Math.min(maxHeight, Math.max(minHeight, this.tableTop + distance));
// 调整第一、第二节桌腿的高度，保持总高度不变
let totalLegHeight = this.legHeight1 + this.legHeight2;
let newLegHeight1 = Math.max(minHeight, totalLegHeight - distance); // 保证第一节桌腿高度不小于0
this.legHeight1 = newLegHeight1;
this.legHeight2 = Math.max(minHeight, totalLegHeight - newLegHeight1); // 保证第二节桌腿高度不小于0
// 更新table-bottom的高度
this.tableBottomHeight = this.tableTop + this.legHeight1 + this.legHeight2;
this.deskValue = this.deskValue - distance; // 更新deskValue，根据你的需求调整
},
在模板中，你需要将.table-bottom的高度绑定到计算后的tableBottomHeight：
<div class="table-bottom" :style="{height: tableBottomHeight + 'px'}">
<div :style="{height: legheight1 + 'px'}" class="leg"></div>
<div :style="{height: legheight2 + 'px', width: '30px'}" class="leg"></div>
<div class="leg" style="height: 50px; width: 40px;"></div>
</div>
通过以上修改，我们实现了第三节桌腿位置固定，第一、二节桌腿高度可调，并保持三节桌腿连接的升降效果。 请根据你的实际代码和需求调整参数和逻辑。 记住要设置合理的minHeight和maxHeight来限制桌腿高度变化范围。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
