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

創(chuàng)新互聯(lián)總部坐落于成都市區(qū)，致力網(wǎng)站建設(shè)服務(wù)有成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷策劃、網(wǎng)頁設(shè)計(jì)、網(wǎng)站維護(hù)、公眾號(hào)搭建、微信小程序開發(fā)、軟件開發(fā)等為企業(yè)提供一整套的信息化建設(shè)解決方案。創(chuàng)造真正意義上的網(wǎng)站建設(shè)，為互聯(lián)網(wǎng)品牌在互動(dòng)行銷領(lǐng)域創(chuàng)造價(jià)值而不懈努力！

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

概念及注意事項(xiàng)

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

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

注意事項(xiàng)

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

使用場(chǎng)景

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

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

添加如下代碼

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

點(diǎn)擊效果如下圖

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

上圖以長矩形按鈕為例，采用scale整體縮放效果顯然不佳

圓形按鈕顯然更合適對(duì)于同頁面等待請(qǐng)求返回的按鈕，配合 disabled 屬性，使用加載中按鈕的方案更為合理

4.有待考量的場(chǎng)景

選擇類按鈕，特指點(diǎn)擊切換某些狀態(tài)，會(huì)有及時(shí)的狀態(tài)切換響應(yīng)的，如遮罩層、active類導(dǎo)航圖標(biāo)類，首頁的圖標(biāo)導(dǎo)航我認(rèn)為以上無需添加hover類

特別說明
以上只是拋磚引玉，針對(duì)點(diǎn)擊態(tài)，用戶體驗(yàn)優(yōu)化的示例
歡迎大家針對(duì)效果、使用場(chǎng)景、統(tǒng)一性等方面留言、評(píng)論作出優(yōu)化和補(bǔ)充，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞標(biāo)題：小程序hover-class點(diǎn)擊態(tài)效果實(shí)現(xiàn)
標(biāo)題來源：http://chinadenli.net/article26/ppdijg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、用戶體驗(yàn)、品牌網(wǎng)站建設(shè)、企業(yè)建站、定制網(wǎng)站、網(wǎng)站導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)