uni-app nvue 动态class 的伪类 :active 不生效
uni-app nvue 动态class 的伪类 :active 不生效
| 开发环境 | 版本号 | 项目创建方式 |
|---|---|---|
| Windows | window 10 专业版 | HBuilderX |
产品分类：uniapp/App
PC开发环境操作系统：Windows
PC开发环境操作系统版本号：window 10 专业版
HBuilderX类型：正式
HBuilderX版本号：3.4.6
手机系统：iOS
手机系统版本号：iOS 14
手机厂商：苹果
手机机型：iphone XR
页面类型：nvue
vue版本：vue2
打包方式：云端
项目创建方式：HBuilderX
示例代码：
<div class="btn" :class="canSubmit?'btnActive':''">
<text class="btnText" :class="canSubmit?'btnTextActive':''">确认提交</text>
</div>
.btnActive:active{
background-color: #005cbe;
}
bug描述：
nvue (vue 是否有问题不清楚) 为某个元素 动态绑定了一个 class 类似 :class="visivle?'show':'hide'" 当我给show添加伪类 :active时 是无效的
4 回复
在 uni-app 中使用 nvue 开发时，动态 class 的伪类 :active 不生效，可能是由于 nvue 的渲染机制与 vue 有所不同。nvue 是基于 Weex 的渲染引擎，其样式和事件处理与 H5 或 小程序 有一些差异。
以下是一些可能的原因和解决方案：
1. 检查样式作用域
nvue 的样式作用域与 vue 不同，确保你的样式是作用在正确的元素上。你可以尝试在 class 中直接写 :active 伪类，看看是否生效。
<template>
<view class="my-button" :class="{ active: isActive }" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
按钮
</view>
</template>
<style scoped>
.my-button {
background-color: #ccc;
}
.my-button:active {
background-color: #f00;
}
</style>2. 使用 @touchstart 和 @touchend 事件
在 nvue 中，active 伪类可能不会像在 H5 中那样自动触发。你可以通过手动监听 @touchstart 和 @touchend 事件来模拟 active 效果。
<template>
<view :class="['my-button', { active: isActive }]" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
按钮
</view>
</template>
<script>
export default {
data() {
return {
isActive: false
};
},
methods: {
handleTouchStart() {
this.isActive = true;
},
handleTouchEnd() {
this.isActive = false;
}
}
};
</script>
<style scoped>
.my-button {
background-color: #ccc;
}
.my-button.active {
background-color: #f00;
}
</style>3. 检查 nvue 的样式支持
nvue 的样式支持与 H5 有所不同，某些 CSS 特性可能不被支持。确保你使用的 CSS 特性在 nvue 中是支持的。
4. 使用 hover-class
如果你需要实现类似 hover 或 active 的效果，nvue 提供了 hover-class 属性，可以在触摸时应用特定的样式。
<template>
<view hover-class="button-active" class="my-button">
按钮
</view>
</template>
<style scoped>
.my-button {
background-color: #ccc;
}
.button-active {
background-color: #f00;
}
</style>