(小程序篇)4.点击效果hover-class:指定按下去的样式类。当 hover-class="none" 时，没有点

说明：小程序view组件中hover-class属性，可用来做体验优化

1.属性说明

hover-class:指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-start-time:按住后多久出现点击态，单位毫秒

2.代码展示

.wxml

<view hover-class="rect-hover" hover-stay-time="300" class="btn">点击</view>

.wxss

.btn{
  width: 240rpx;
  height: 98rpx;
  background:#C11920;
  color:#fff;
  font-size: 32rpx;
  font-weight: 500;
  text-align: center;
  line-height: 98rpx;
}
.rect-hover{
  position: relative;
  top: 3rpx;
  left: 3rpx;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, .1) inset;
}

3.效果展示

点击前点击后