根据输入的数据改变长方形高度

最新推荐文章于 2024-03-14 17:00:04 发布

oneiric_origin

最新推荐文章于 2024-03-14 17:00:04 发布

阅读量322

点赞数

本文链接：https://blog.csdn.net/oneiric_origin/article/details/107309788

版权

本文探讨如何根据输入数据，通过后端技术调整图形的高度。内容涉及后端处理逻辑和可能的交互方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图形高度需要后端进行改变时

<template>
	<view class="content" style="height: 100vh;">
		<view style="height: 100vh;">
			<view style="display: flex;justify-content: center;align-items: center;">
				<view class="fctagging">
					<view class="fcshuizhu" :style="{height:sheight+'px'}"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sheight:0,
			}
		},
		onLoad(res) {			
			this.jishi()	
		},
		methods: {
			jishi(){
				let that = this
				setTimeout(function(){
				    //如果改变that.sheight的数据就可以改变图形的高度
					that.sheight = 40
					that.$refs.shuizhu.$el.style.height = that.sheight
				},2000)
			},
			
		}
	}
</script>
<style>
.fcbg{
	width: 100vw;
	height: 100vh;
}
.fctagging{
	width: 170px;
	height: 300px;
	position: absolute;
	left: 30px;
	top: 200px;
}
.fctagging image{
	width: 100%;
	height: 100%;
}
.fcshuizhu{
	width: 78px;
	/* height: 80rpx; */
	background-image: linear-gradient(#24ccff, #4f92ff);
	position: absolute;
	left: 32px;
	bottom: 4px;
	opacity:0.8;
}

.fcbgh{
	width: 100vw;
	height: 100vh;
}
.fctaggingh{
	width: 170px;
	height: 300px;
	position: absolute;
	left: 30px;
	top: 200px;
}
.fctaggingh image{
	width: 100%;
	height: 100%;
}
.fcshuizhuh{
	width: 77px;
	/* height: 80rpx; */
	background-image: linear-gradient(#24ccff, #4f92ff);
	position: absolute;
	left: 33px;
	bottom: 4px;
	opacity:0.8;
}
</style>