小顺序hover-class点击态结果——小顺序体验

2019年8月31日 220次阅读来源: 周振超

微信小顺序设置 hover-class，完成点击态结果

加强小顺序触感，进步用户交互感知度

概念及注意事项

微信小顺序中，可以用 hover-class 属性来指定元素的点击态结果。然则在在运用中要注意，大部分组件是不支撑该属性的。

现在支撑 hover-class 属性的组件有三个：view、button、navigator。
不支撑 hover-class 属性的组件，同时也不支撑 hover-stop-propagation、hover-start-time、hover-stay-time 这三个属性。
当 hover-class 的值为 none 时，组件上不会有任何点击态结果。

《小顺序hover-class点击态结果——小顺序体验》

注意事项

hover-class款式显现的道理是点击时把款式加到class的款式中，争执时，谁在背面就显现谁!
当组件中没有任何指定的类时，直接运用 hover-class 就会起到相应的作用，然则当组件中已指定了其他可能与 hover-class 争执的类时，hover-class 无效
将 hover-class 指定的类放在对应 wss 文件的最末端，如许就不会被其他类所掩盖
一般，当一个 view 组件中包括 image 等不支撑 hover-class 的组件，但又须要在该组件上运用 hover-stop-propagation 属性的作用时，须要将不支撑 hover-class 的组件用view、button 或 navigator 包裹起来

运用场景

1.列表页——详情页（点击跳转）

以新闻资讯为例，大部分应当都是如许的

《小顺序hover-class点击态结果——小顺序体验》

增加以下代码

//html
<view hover-class='wsui-btn__hover_list'>
    ...
</view>
//css
.wsui-btn__hover_list {
    opacity: 0.9;
    background: #f7f7f7;
}

点击结果以下图

《小顺序hover-class点击态结果——小顺序体验》

2.展现类表格列表（不触发跳转）

可设置hover-stay-time属性，凸起显现触摸行或列

//html
<view hover-class='wsui-btn__hover_list' hover-stay-time="3000">
    ...
</view>
//css
.wsui-btn__hover_list {
    opacity: 0.9;
    background: #f7f7f7;
}

《小顺序hover-class点击态结果——小顺序体验》

3.提交类按钮

1种款式每每不能满足，种种外形的按钮，暂供应以下2种参考

.wsui-btn__hover_btn {
//圆形按钮
  opacity: 0.9;
  transform: scale(0.95, 0.95);
//长矩形按钮
  position: relative;
  top: 3rpx;
  left: 3rpx;
  box-shadow:0px 0px 8px rgba(0, 0, 0, .1) inset; 
}

《小顺序hover-class点击态结果——小顺序体验》