<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;
}