小程序hover-class點擊態(tài)效果實現(xiàn)

更新時間：2019年02月26日 10:15:12 作者：周振超

這篇文章主要介紹了小程序hover-class點擊態(tài)效果實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

微信小程序設(shè)置 hover-class，實現(xiàn)點擊態(tài)效果

增強(qiáng)小程序觸感，提高用戶交互感知度

概念及注意事項

微信小程序中，可以用 hover-class 屬性來指定元素的點擊態(tài)效果。但是在在使用中要注意，大部分組件是不支持該屬性的。

目前支持 hover-class 屬性的組件有三個：view、button、navigator。
不支持 hover-class 屬性的組件，同時也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 這三個屬性。
當(dāng) hover-class 的值為 none 時，組件上不會有任何點擊態(tài)效果。

注意事項

hover-class樣式顯示的原理是點擊時把樣式加到class的樣式中，沖突時，誰在后面就顯示誰!
當(dāng)組件中沒有任何指定的類時，直接使用 hover-class 就會起到相應(yīng)的作用，但是當(dāng)組件中已經(jīng)指定了其他可能與 hover-class 沖突的類時，hover-class 無效
將 hover-class 指定的類放在對應(yīng) wss 文件的最末尾，這樣就不會被其他類所覆蓋
通常，當(dāng)一個 view 組件中包含 image 等不支持 hover-class 的組件，但又需要在該組件上使用 hover-stop-propagation 屬性的作用時，需要將不支持 hover-class 的組件用view、button 或 navigator 包裹起來

使用場景

1.列表頁——詳情頁（點擊跳轉(zhuǎn)）

以新聞資訊為例，大部分應(yīng)該都是這樣的

添加如下代碼

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

點擊效果如下圖

2.展示類表格列表（不觸發(fā)跳轉(zhuǎn)）

可設(shè)置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;
}

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