小程序hover-class點擊態(tài)效果——小程序體驗

sewerganger 發(fā)布于2019-08-23 15:28 / 2150人閱讀

摘要：微信小程序設置，實現(xiàn)點擊態(tài)效果增強小程序觸感，提高用戶交互感知度概念及注意事項微信小程序中，可以用屬性來指定元素的點擊態(tài)效果。目前支持屬性的組件有三個。

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

增強小程序觸感，提高用戶交互感知度

概念及注意事項

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

目前支持 hover-class 屬性的組件有三個：view、button、navigator。

不支持 hover-class 屬性的組件，同時也不支持 hover-stop-propagation、hover-start-time、hover-stay-time 這三個屬性。

當 hover-class 的值為 none 時，組件上不會有任何點擊態(tài)效果。

注意事項

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.列表頁——詳情頁（點擊跳轉）

以新聞資訊為例，大部分應該都是這樣的

添加如下代碼

//html

    ...

//css
.wsui-btn__hover_list {
    opacity: 0.9;
    background: #f7f7f7;
}

點擊效果如下圖

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

可設置hover-stay-time屬性，突出顯示觸摸行或列

//html

    ...

//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整體縮放效果顯然不佳

圓形按鈕顯然更合適

對于同頁面等待請求返回的按鈕，配合 disabled 屬性，使用加載中按鈕的方案更為合理

4.有待考量的場景

選擇類按鈕，特指點擊切換某些狀態(tài)，會有及時的狀態(tài)切換響應的，如遮罩層、active類

導航圖標類，首頁的圖標導航

我認為以上無需添加hover類

特別說明
以上只是拋磚引玉，針對點擊態(tài)，用戶體驗優(yōu)化的示例
歡迎大家針對效果、使用場景、統(tǒng)一性等方面在下方留言、評論作出優(yōu)化和補充

本文貢獻者

約定
用戶體驗是一個值得終身研究的課題，眾人拾柴火焰高，這里將公布對本文作出貢獻的思否開發(fā)者及其個人主頁鏈接

GPU云服務器云服務器小程序體驗免費體驗小程序小程序體驗版小程序小程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102100.html

當微信小程序遇上filter~

摘要：具體用法其中表示數組元素的值，表示數組元素的下標，表示包含該元素的數組。這里采用隨機函數來獲取數組的下標，函數是獲取之間的數，函數是向下取整，這樣就可以隨機獲取相應的下標數。小程序中的模板就很好地幫我們解決了這個問題，并通過屬性來實現(xiàn)調用。在微信小程序的開發(fā)過程中，當你想要實現(xiàn)不同頁面間的數據綁定，卻為此抓耳饒腮時，不妨讓微信小程序與filter 來一場完美的邂逅，相信會給你帶來別樣...

Darkgel 2019-08-21 18:33 評論0 收藏0
淺談小程序運行機制

摘要：小程序的基礎庫不會被打包在某個小程序的代碼包里邊，它會被提前內置在微信客戶端。小程序沒有重啟的概念當小程序進入后臺，客戶端會維持一段時間的運行狀態(tài)，超過一定時間后目前是分鐘會被微信主動銷毀當短時間內連續(xù)收到兩次寫作背景接觸小程序有一段時間了，總得來說小程序開發(fā)門檻比較低，但其中基本的運行機制和原理還是要懂的。比如我在面試的時候問到一個關于小程序的問題，問小程序有window對象嗎？...

Caicloud 2019-08-26 18:27 評論0 收藏0
微信小程序學習簡介

摘要：具體調用參考接口請求封裝函數一般在中實現(xiàn)微信自帶的網絡請求方法調用接口請求函數如在中首先需要獲取應用實例調用數據請求在函數中聲明的一個全局變量，接下來使用點語法直接調用請求下來的值就可以了。如何向微信小程序導入DEMO源碼：參考方法參考學習小程序官方文檔小程序官方文檔小程序目錄簡介 app.json ：設置一些工程全局的量.js : 寫一些函數邏輯.wxml: 調用.js中寫...

BetaRabbit 2019-08-30 14:07 評論0 收藏0
微信小程序學習簡介

摘要：具體調用參考接口請求封裝函數一般在中實現(xiàn)微信自帶的網絡請求方法調用接口請求函數如在中首先需要獲取應用實例調用數據請求在函數中聲明的一個全局變量，接下來使用點語法直接調用請求下來的值就可以了。如何向微信小程序導入DEMO源碼：參考方法參考學習小程序官方文檔小程序官方文檔小程序目錄簡介 app.json ：設置一些工程全局的量.js : 寫一些函數邏輯.wxml: 調用.js中寫...

Drummor 2019-08-22 15:22 評論0 收藏0