uni-app 页面上下滑动时也会触发 hover-class

发布于 1周前 作者 itying888 来自 Uni-App

uni-app 页面上下滑动时也会触发 hover-class

产品分类

uniapp/H5

开发环境信息

项目 信息
PC开发环境操作系统 Windows
操作系统版本号 19045.5247
HBuilderX类型 正式
HBuilderX版本号 4.44
浏览器平台 Chrome
浏览器版本 126.0.6478.127
项目创建方式 HBuilderX

示例代码

<template>
<view class="content">
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello'
};
},
onLoad() {},
methods: {}
};
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.area {
width: 100%;
padding: 80rpx 0;
background-color: #eeeeee;
}
.hoverClass{
background-color: #000000;
}
</style>

操作步骤

<template>
<view class="content">
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
<view class="area" hover-class="hoverClass">哈哈哈哈</view>
</view>
</template>

<script>
export default {
data() {
return {
title: 'Hello'
};
},
onLoad() {},
methods: {}
};
</script>

<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.area {
width: 100%;
padding: 80rpx 0;
background-color: #eeeeee;
}
.hoverClass{
background-color: #000000;
}
</style>

预期结果

页面滑动不会触发hover-class

实际结果

页面滑动会触发hover-class

bug描述

页面上下滑动的时候也会触发hover-class，问答社区看到官方人员回复，hover-class会先判断是否有页面滑动，滑动则不会触发hover-class，实测在H5以及安卓ios页面滑动都会触发hover-class


Harmonyos Next教程
4 回复

hover-class会先判断是否有页面滑动，滑动则不会触发hover-class

这个是哪个帖子回复的


https://ask.dcloud.net.cn/question/188254

使用active伪类可以实现滑动的时候不触发hover-class

在uni-app中，页面上下滑动时触发 hover-class 是一个比较特殊的问题，因为 hover-class 通常是为了处理鼠标悬停事件而设计的，而在移动设备上，这种事件往往与触摸事件相关联。如果你的页面在上下滑动时错误地触发了 hover-class，可能是由于触摸事件被误识别为悬停事件。

为了解决这个问题，你可以通过以下几种方法尝试避免不必要的 hover-class 触发：

  1. 使用触摸事件监听器：通过监听触摸事件（如 touchstart、touchmove、touchend），你可以控制 hover-class 的应用逻辑，确保它只在合适的时机被触发。

以下是一个示例代码，展示了如何使用触摸事件来管理 hover-class 的应用：

<template>
  <view class="container">
    <view
      class="item"
      :class="{ 'hover-class': isHovered }"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      Item
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isHovered: false,
    };
  },
  methods: {
    onTouchStart() {
      this.isHovered = true;
    },
    onTouchMove() {
      // 阻止在滑动时保持 hover 状态
      this.isHovered = false;
    },
    onTouchEnd() {
      // 可以在这里根据需要重新设置 hover 状态
      // 但为了避免滑动时误触发，这里不设置回 true
      // this.isHovered = true; // 如果需要，可以根据具体需求调整
    },
  },
};
</script>

<style>
.container {
  height: 100vh;
  overflow-y: scroll;
}

.item {
  width: 100%;
  height: 100px;
  background-color: lightblue;
  text-align: center;
  line-height: 100px;
}

.hover-class {
  background-color: lightcoral;
}
</style>

在这个示例中，isHovered 变量用于控制 hover-class 的应用。当触摸开始时，isHovered 被设置为 true，触发 hover-class。但在触摸移动时，isHovered 被立即设置为 false，从而避免了在滑动时保持 hover-class 状态。

  1. CSS 样式调整：如果可能，你也可以通过调整 CSS 样式来减少或避免 hover-class 的视觉效果，使其在滑动时不那么明显或根本不显示。

通过以上方法，你可以有效地控制 hover-class 在 uni-app 中的行为，避免在页面上下滑动时错误触发。

回到顶部