vue横向滑动和竖向滑动

最新推荐文章于 2024-04-10 13:49:47 发布

weixin_43493217

最新推荐文章于 2024-04-10 13:49:47 发布

阅读量713

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_43493217/article/details/112899528

版权

本文详细介绍了如何在Vue.js项目中实现横向和纵向滑动的交互功能，包括设置CSS样式、监听触摸事件以及处理滑动逻辑，帮助开发者创建更丰富的用户体验。

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

<!-- 设备详情页面 -->
<template>
	<div style="width: 100%;height: 100%;" id="huadongContent">
		<div class="numberInfo">
			<div class="flexRowCenterCenter">
				<div class="oneNumber flexColumnCenterCenter">
					<div class="numberValue">{
  {brightness}}%</div>
					<div class="numberText">亮度值</div>
				</div>
				<div style="width: 1px;height: 10px;background: white;"></div>
				<div class="oneNumber flexColumnCenterCenter">
					<div class="numberValue">{
  {colorTemperature}}K</div>
					<div class="numberText">色温值</div>
				</div>
			</div>
		</div>
		<template v-show="statusValue">
			<div class="colorTemperature flexRowStartCenter" v-show="controlbarShow">
				<img src="../assets/img/huadong/colorTemperature.png" width="10" height="22" />
				<div class="control_bar" id="controlbar">
					<div class="control_bar_cursor" id="controlbarcursor" :style="{left:(xPosition+'px')}"></div>
				</div>
			</div>
			<div class="brightness flexColumnCenterCenter" v-show="controlbar2Show">
				<div>
					<div class="control_bar2" id="controlbar2">
					</div>
					<div class="control_bar_cursor2" id="controlbarcursor2" :style="{height:(yPosition+'px')}"></div>
				</div>

				<img src="../assets/img/huadong/brightness.png" width="24" height="24" />
			</div>
			<img src="../assets/img/huadong/slider.png" v-if="silderShow" class="sliderImg" :style="{left:silderx+'px',top:slidery+'px'}"
			 width="48" height="48" />
		</template>


	</div>
</template>
<script>
	export default {
		components: {

		},
		props: ["bValue", 'ctValue', 'dimmerStatus'],
		data() {
			return {
				startx: 0,
				starty: 0,
				endx: 0,
				endy: 0,
				xPosition: -4,
				yPosition: 0,
				con

最低0.47元/天解锁文章