小程序hover-class點擊態(tài)效果實現(xiàn)-創(chuàng)新互聯(lián)

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

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、改則ssl等。為近千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的改則網(wǎng)站制作公司

增強(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;
}

網(wǎng)站題目：小程序hover-class點擊態(tài)效果實現(xiàn)-創(chuàng)新互聯(lián)
當(dāng)前鏈接：http://bm7419.com/article14/didcge.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、定制網(wǎng)站、建站公司、標(biāo)簽優(yōu)化、網(wǎng)站營銷、搜索引擎優(yōu)化

廣告

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