uniapp/vue桌子升降效果，第三节桌腿固定实现

本文介绍Uniapp/Vue中如何实现带固定桌腿的桌子升降效果。 现有代码所有桌腿高度同步变化，本文通过修改CSS和JavaScript代码，实现第三节桌腿底部固定，第一、二节桌腿高度可调，并保持三节桌腿连接的升降效果。 CSS方面，利用`position: absolute;`和`bottom: 0;`固定第三节桌腿位置；JavaScript方面，动态调整第一、二节桌腿高度及底部区域高度，确保整体效果协调。 通过本文提供的代码修改方案，开发者可以轻松实现具有固定桌腿的桌子升降动画效果，提升用户体验。

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：

<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来限制桌腿高度变化范围。

好了，本文到此结束，带大家了解了《uniapp/vue桌子升降效果，第三节桌腿固定实现》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！