uniapp/vue中，如何按照要求改动代码？
根据以下的代码进行改动，现在代码出来的效果是第三节桌腿的位置会根据第1、2节高度的变化而变化。
我需要的效果是第三节桌腿的位置是固定不变的，第一第二桌腿高度由上往下变低，并且整个桌子和三节桌腿始终都要连在一起，也就是升降桌的效果，请问大神们我该怎么改？代码直接复制可用
简单点就是说，上下滑动时，固定第三节桌腿的位置，其他功能不变
小弟在这里先感谢各位大神们，感激不尽，祝大神们发财祝大神们取漂亮老婆！！！
<view style="height: 140rpx;"></view> <div style="display: flex;justify-content: center;flex-direction: row;width: 100%;">
<div class="container">
<!-- 定义桌子的组件 -->
<div class="table" :style="{top: tableTop + 'px'}" @touchstart.stop.prevent="onTouchStart"
@touchmove.stop.prevent="onTouchMove">
<!-- 定义桌子的上部分 -->
<div class="table-top">
<!-- 定义两个长方形 -->
<div class="rect"></div>
<div class="rect_a"></div>
</div>
<!-- 定义桌子的下部分 -->
<div class="table-bottom">
<!-- 定义三节桌腿 -->
<div class="leg" :style="{height: legHeight1 + 'px'}"></div>
<div class="leg" :style="{height: legHeight2 + 'px', width: '30px'}"></div>
<!-- 下面这一行就是第三节桌腿 -->
<div class="leg" style="height: 50px; width: 40px;"></div>
</div>
</div>
</div>
</div>
data() { return {
// 定义桌子的初始位置
tableTop: 114,
// 定义桌腿的初始高度
legHeight1: 75,
legHeight2: 75,
// 定义触摸事件的初始坐标
touchStartY: 0,
// 定义桌子的最大值和最小值
maxTop: 180, // 最大值为200px
minTop: 50, // 最小值为50px
deskValue: 100,
}
},
// 定义触摸开始时的方法 onTouchStart(event) {
// 获取触摸点的纵坐标
this.touchStartY = event.touches[0].clientY;
},
// 定义触摸移动时的方法
onTouchMove(event) {
// if(this.deskValue >100 || this.deskValue < 0){
// return
// }
// 获取触摸点的纵坐标
let touchMoveY = event.touches[0].clientY;
// 计算触摸点移动的距离
let distance = touchMoveY - this.touchStartY;
// 判断是否超过最大值或最小值
if (distance > 0 && this.deskValue - 1 < 1) {
// 没有超过最大值或最小值，更新位置和高度
return
} else if (distance < 0 && this.deskValue + 1 > 100) {
return
} else {
if (this.tableTop + distance < 114 || this.tableTop + distance > 196) {
return
} else {
this.tableTop += distance;
}
this.legHeight1 -= distance;
this.legHeight2 -= distance;
}
if (distance > 0) {
// 向下滑，value减少1
this.deskValue = this.deskValue - 1;
} else if (distance < 0) {
// 向上滑，value增加1
this.deskValue = this.deskValue + 1;
}
// 更新触摸点的纵坐标
this.touchStartY = touchMoveY;
},
.container { // width: 100vw;
height: 200px;
max-height: 200px;
/* 添加最大高度 */
min-height: 50px;
/* 添加最小高度 */
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 40rpx;
}
.table {
position: absolute;
width: 200px;
}
/* 定义桌子上部分的样式 */
.table-top {
height: 50px;
display: flex;
flex-direction: column;
align-items: center;
}
/* 定义长方形的样式 */
.rect {
// flex: 1;
width: 250px;
height: 15px;
// background-color: #f0f0f0;
border: 1px solid black;
}
.rect_a {
flex: 1;
width: 150px;
// background-color: #f0f0f0;
border: 1px solid black;
}
/* 定义桌子下部分的样式 */
.table-bottom {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
/* 定义桌腿的样式 */
.leg {
width: 20px;
// background-color: #e0e0e0;
border: 1px solid black;
}
回答：
本质是css问题，所以只改了样式布局部分
https://jsrun.net/e4xKp
回答：
读代码后
文中此处代码可能有误 两个腿都在变短 此处应该x2 不然位置一定会变化 导致下方的腿上来了
应该改成 （tableTop *2）
<!-- 定义桌子的组件 -->
<div class="table" :style="{top: tableTop *2 + 'px'}" @touchstart.stop.prevent="onTouchStart" @touchmove.stop.prevent="onTouchMove">
以上是 uniapp/vue中，如何按照要求改动代码？ 的全部内容， 来源链接： utcz.com/p/935083.html
