【微信小程序】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;
}