【微信小程序】view之点击变色效果

<view class='view-box-btn' bindtap="onSave">保存</view>

这样的一个按钮，在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: white;margin-right: 5%;
}.view-box-btn :active{background-color: #87CEFF;
}

虽然设置了active效果，但是此时在点击保存时，页面上并不会有变色效果
这时我们给保存再包裹一个view，同时把样式转移到里层view，变成这样

<view class='view-box-btn' bindtap="onSave"> <view class="btn-save">保存</view>
</view>

.btn-save{width: 100%;height: 100%;border: 1px solid rgb(248, 248, 255);display: flex;align-items: center;border-radius: 20rpx;justify-content: center;
}

此时再点击保存，才会有变色效果

不过官方文档有建议如下，原文看这里

避免使用:active伪类来实现点击态
使用 css :active伪类来实现点击态，很容易触发，并且滚动或滑动时点击态不会消失，体验较差。建议使用小程序内置组件的 ‘hover-class’ 属性来实现
得分条件：不使用:active伪类，并使用hover-class替换:active

目前支持 hover-class 属性的组件有三个：view、button、navigator
当 hover-class 的值为 none 时，组件上不会有任何点击态效果。默认为none

综上，view之点击效果最终解决方案采用hover-class，弃用active ，代码如下：

<view class='view-box-btn' bindtap="onSave"
hover-class='view-box-btn-hover'>保存</view>

.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: white;margin-right: 5%;align-items: center;justify-content: center;display: flex;
}.view-box-btn-hover{background-color: #87CEFF;
}

【微信小程序】view之点击变色效果相关推荐

image 微信小程序flex_微信小程序view标签以及display:flex的测试
一:testview.wxml,testview.js自动生成示例代码 //testview.wxml flex-direction: row 1 2 3 flex-direction: column ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序点击按钮弹出弹窗_微信小程序实现的点击按钮弹出底部上拉菜单功能示例...
本文实例讲述了微信小程序实现的点击按钮弹出底部上拉菜单功能.分享给大家供大家参考,具体如下: index.wxml 弹出action sheet {{item.txt}} 取消提示:您选择了菜单{ ...
微信小程序阻止冒泡点击_微信小程序bindtap事件与冒泡阻止详解
bindtap就是点击事件在.wxml文件绑定: cilck here 在一个组件的属性上添加bindtap并赋予一个值(一个函数名) 当点击该组件时, 会触发相应的函数执行在后台.js文件中定义 ...
微信小程序 View：flex 布局
微信小程序 View 支持两种布局方式:Block 和 Flex 所有 View 默认都是 block 要使用 flex 布局的话需要显式的声明: display:flex; 下面就来介绍下微信小程序 ...
微信小程序 view的文本自动换行了的问题（scroll-view）/微信小程序 view换行跟不换行的解决方案
今天在写一个滚动导航栏的时候发现 view的文本自动换行了,用了display:flex;flex-warp:nowarp;也不管用, wxml: {{item}} wxss: .top{ width ...
微信小程序view标签hover-class属性和text标签selectable和decode属性
微信小程序view标签hover-class属性和text标签selectable和decode属性 <view hover-class="hc">按下样式</v ...
微信小程序view水平垂直居中完美解决
微信小程序view水平垂直居中完美解决 .view_box{display: flex;align-items: center;justify-content: center;width: 100%; ...

【微信小程序】view之点击变色效果

【微信小程序】view之点击变色效果相关推荐

最新文章

热门文章