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

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

霞舞

发布： 2025-03-16 08:56:01

原创

963人浏览过

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

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

降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

113

查看详情

在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中如何实现桌子升降效果，同时保持第三节桌腿位置固定？的详细内容，更多请关注php中文网其它相关文章！