【微信小程序】view等组件设置背景色导致点击态背景色无效问题

最新推荐文章于 2024-06-01 15:15:00 发布
最新推荐文章于 2024-06-01 15:15:00 发布
阅读量1.7k 收藏 2
点赞数 2
分类专栏： 微信小程序 文章标签： 小程序 vue css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44806263/article/details/106275577
版权
当在微信小程序的view组件上设置背景色并应用hover-class样式时，点击态的背景色可能无效。该问题可以通过在CSS样式中为背景色添加`!important`属性来解决，确保点击态背景色正常显示。
摘要由CSDN通过智能技术生成

【微信小程序】view等组件设置背景色，添加hover-class样式后点击态背景色无效

在微信小程序中，使用hover-class 属性来指定元素的点击态效果。

支持hover-class属性的组件

view、button、navigator

使用方法

view组件：

<view class="cu-item" hover-class="click-hover">
最低0.47元/天 解锁文章
LeeXan4
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
12.关于uniapp小程序设置页面背景色无效的问题及解决方案
endingCode
03-20 4671
1、问题的产生 需求：登录页面根据三种不同的角色，呈现不同的界面，背景色是其中一个元素。 问题：在uniapp中这么设置背景色不管用。（在微信开发者工具中，这样是可以的。） <style scoped> page{ height: 100%; background-color: #007AFF; } </style> 2、解决方法：去掉<style> page{ height: 100%; background-color: #007AFF; }
微信小程序实现点击改变view背景颜色
liuhaoxin666的博客
04-22 1万+
点击改变view背景颜色 线上效果图，如下： 效果就是点击任一一个，它的背景颜色和字体颜色都会改变 1.布局 我是用循环写的，因为这样比较方便吧，不然还需要设置好几个点击事件，代码如下： <view class="tapgo"> <view style=" background-color: {{item.color}};color: {{item.tcol}};" clas...
微信小程序 点击view变色
菜鸟日记
02-12 807
微信小程序如何设置按钮点击变色 - 简书
微信小程序的view的属性值和用法
最新发布
suqi_123123的博客
06-01 1837
微信小程序中的 view 组件具有多种属性，用于控制其样式、行为和交互。class / style: 控制视图的样式。hover-stay-time: 控制悬停时的样式和行为。data-xxx: 自定义数据属性，可在 JavaScript 中访问。bindtap / catchtap: 绑定点击事件。animation: 指定动画效果。hidden: 控制视图是否隐藏。控制滚动行为。selectable: 控制文本是否可选中。
【Android】动态设置 View 的背景颜色 BackgroundColor 无效的问题
ZhangRui的博客
09-21 6944
问题描述 我们都知道 setBackgroundColor() 方法用于动态设置 view 的背景颜色。今天在做需求的时候，需要根据情况动态更新自定义 view 的背景颜色，于是就想当然的这么写： mItemView.setBackgroundColor(R.color.message_red) 结果呈现出来的 UI 效果并不是我们想要的。纳闷了好久。。。。 然而，如果自己定义一个 color....
微信小程序入门中scroll-view那块颜色不显示问题
weixin_44003632的博客
03-11 1641
在学习微信小程序开发中，到了scroll-view这一块的时候，为了给我们更好的讲解。给我们提供了测试代码。 .xwml文件 &lt;view class="section"&gt; &lt;view class="section__title"&gt;vertical scroll&lt;/view&gt; &lt;scroll-view scroll-y style=&qu
微信小程序实现点击按钮修改view标签背景颜色功能示例【附demo源码下载】
08-28
本文详细介绍了微信小程序实现点击按钮修改view标签背景颜色功能的相关知识点，包括微信小程序事件响应、数据绑定及样式设置、逻辑文件设置背景属性初始值、点击按钮修改背景属性值、数值运算实现动态设置背景色样式...
【微信小程序】view之点击变色效果
01-03
这样的一个按钮，在wxss中设置它的样式 .view-box-btn { width: 90%; height: 100rpx; margin-top: 20px; border-radius: 20rpx; border: 1px solid rgb(248, 248, 255); margin-left: 5%; background-color:...
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
而uni-app则是一个多端开发框架，它允许开发者使用一套代码来构建iOS、Android、H5、微信小程序、支付宝小程序等多个平台的应用。在这个场景下，我们讨论的是uni-app在微信小程序中的一个关键功能——日历组件。 ...
微信小程序仿淘宝滚动导航栏背景色渐变
12-30
在这个项目中，“微信小程序仿淘宝滚动导航栏背景色渐变”是一个具体的功能实现，旨在模仿淘宝App中的一个常见交互设计，即当用户在商品列表中上下滑动时，顶部导航栏的背景色会从透明逐渐变为白色，从而提供良好的...
android 置灰不可点击,android 按钮置灰效果
weixin_33609654的博客
05-26 2771
通过设置可点击 和颜色实现package com.yqy.yqy_button;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.Menu;import android.view.View;import android.view.View.OnClick...
微信小程序对cover-view标签设置border没效果（手机不显示）
Mr_chen95的博客
02-05 1万+
跟我的另一篇博客有些相似之处，都是在手机上不显示的问题，这次是border不显示，最近在做的一个项目，cover-view跟map结合一起使用，对cover-view设置border无效，现在都没找到原因，不过有一个解决的办法 比如我要给一个cover-view设置底部边框，我会在下面再添加一个cover-view，给第二个cover-view设置宽度百分之百，高度为1个像素，说白了就是模拟边框
微信小程序中好看的按钮样式（渐变色）、view的点击变色效果、按钮漂亮的圆角边框、解决hover设置失效
热门推荐
wy313622821的博客
09-22 4万+
在.wxss文件中代码如下： /* border-radius: 98rpx;是控制按钮边变圆 */ .goodbutton { margin-top: 30px; width: 80%; background-color: rgb(252, 126, 67); color: white; border-radius: 98rpx; background: bg_red...
解决微信小程序button的hover-class不生效问题
Hexa_H的博客
02-07 2753
……会导致button的hover-class不生效，此时解决办法非常简单，只需令wxss中的class样式中的每一条属性后添加……
微信小程序背景图设置不生效的问题
weixin_44079209的博客
11-17 1613
微信小程序 不能设置背景图 uni 开发微信小程序不能设置背景图
解决click与hover(mouseover)的冲突问题
lucky123star的博客
12-14 7697
主要应用到一个知识点：$(selector).data('name','value'); 无标题文档       .content{           width:100px;           height:100px;           border:2px solid #999;           border-radius:10px;      
微信小程序button修改样式无效
读心悦
02-06 3882
效果如下图中： 这是修改样式后在开发工具中的效果。 但是在手机上预览就是无效的了，如下图： 原来微信小程序的基础样式已经升级到v2版本了，在app.json中可以查阅到： "style": "v2", //基础样式升级 "sitemapLocation": "sitemap.json" 把"style": "v2", 删除就可以了！ ...
解决微信小程序自定义组件后样式失效不起作用的问题
数据大牛的博客
09-24 2万+
问题如图： 解决方式： js的Component()中添加： options: { addGlobalClass: true }, 至此发现样式生效了呢！ 我是一条随风飘摇的结尾符~~~~~ ...
微信小程序如何点击切换单个view的背景色
08-31
微信小程序中点击切换单个view的背景色有多种方法。以下是其中一种常用的方法： 首先，在view的父view中设置一个变量，用于存储当前view的背景色。可以使用data属性进行设置，如下所示： ``` Page({ data: { bgColor: 'red' // 当前view的背景色，默认为红色 }, // ... }) ``` 然后，在view标签中使用该变量绑定背景色的样式，例如： ``` <view class="my-view" style="background-color:{{bgColor}};"></view> ``` 上述代码中的class可以根据需要替换成自定义的样式。 接下来，在view上绑定一个点击事件，用于切换背景色。可以使用bindtap属性来实现，如下所示： ``` <view class="my-view" style="background-color:{{bgColor}};" bindtap="changeBgColor"></view> ``` 同时，在对应Page的JS文件中，定义changeBgColor方法，用于切换背景色，如下所示： ``` Page({ data: { bgColor: 'red' }, changeBgColor: function() { if (this.data.bgColor === 'red') { this.setData({ bgColor: 'blue' }); } else { this.setData({ bgColor: 'red' }); } } }) ``` 以上代码中，changeBgColor方法检查当前背景色，如果是红色则切换为蓝色，如果是蓝色则切换为红色，然后通过setData方法更新data中的bgColor变量。 这样，当点击view时，changeBgColor方法会被触发，从而实现切换背景色的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值