uniapp/vue中如何实现桌子升降效果，同时保持第三节桌腿位置固定？

PHP中文网 • 2025年4月1日 06:02:03 • 编程技术 • 阅读 2

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修改:

在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：

登录后复制

通过以上修改，我们实现了第三节桌腿位置固定，第一、二节桌腿高度可调，并保持三节桌腿连接的升降效果。请根据你的实际代码和需求调整参数和逻辑。记住要设置合理的minHeight和maxHeight来限制桌腿高度变化范围。

以上就是uniapp/vue中如何实现桌子升降效果，同时保持第三节桌腿位置固定？的详细内容，更多请关注【创想鸟】其它相关文章！

发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/3199803.html