摘要:微信小程序設(shè)置,實(shí)現(xiàn)點(diǎn)擊態(tài)效果增強(qiáng)小程序觸感,提高用戶交互感知度概念及注意事項(xiàng)微信小程序中,可以用屬性來(lái)指定元素的點(diǎn)擊態(tài)效果。目前支持屬性的組件有三個(gè)。
微信小程序設(shè)置 hover-class,實(shí)現(xiàn)點(diǎn)擊態(tài)效果
增強(qiáng)小程序觸感,提高用戶交互感知度
概念及注意事項(xiàng)微信小程序中,可以用 hover-class 屬性來(lái)指定元素的點(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í),誰(shuí)在后面就顯示誰(shuí)!
當(dāng)組件中沒有任何指定的類時(shí),直接使用 hover-class 就會(huì)起到相應(yīng)的作用,但是當(dāng)組件中已經(jīng)指定了其他可能與 hover-class 沖突的類時(shí),hover-class 無(wú)效
將 hover-class 指定的類放在對(duì)應(yīng) wss 文件的最末尾,這樣就不會(huì)被其他類所覆蓋
通常,當(dāng)一個(gè) view 組件中包含 image 等不支持 hover-class 的組件,但又需要在該組件上使用 hover-stop-propagation 屬性的作用時(shí),需要將不支持 hover-class 的組件用view、button 或 navigator 包裹起來(lái)
使用場(chǎng)景1.列表頁(yè)——詳情頁(yè)(點(diǎn)擊跳轉(zhuǎn))
以新聞資訊為例,大部分應(yīng)該都是這樣的
添加如下代碼
//html... //css .wsui-btn__hover_list { opacity: 0.9; background: #f7f7f7; }
點(diǎn)擊效果如下圖
2.展示類表格列表(不觸發(fā)跳轉(zhuǎn))
可設(shè)置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); //長(zhǎng)矩形按鈕 position: relative; top: 3rpx; left: 3rpx; box-shadow:0px 0px 8px rgba(0, 0, 0, .1) inset; }
上圖以長(zhǎng)矩形按鈕為例,采用scale整體縮放效果顯然不佳
圓形按鈕顯然更合適
對(duì)于同頁(yè)面等待請(qǐng)求返回的按鈕,配合 disabled 屬性,使用加載中按鈕的方案更為合理
4.有待考量的場(chǎng)景
選擇類按鈕,特指點(diǎn)擊切換某些狀態(tài),會(huì)有及時(shí)的狀態(tài)切換響應(yīng)的,如遮罩層、active類
導(dǎo)航圖標(biāo)類,首頁(yè)的圖標(biāo)導(dǎo)航
我認(rèn)為以上無(wú)需添加hover類
特別說(shuō)明本文貢獻(xiàn)者
以上只是拋磚引玉,針對(duì)點(diǎn)擊態(tài),用戶體驗(yàn)優(yōu)化的示例
歡迎大家針對(duì)效果、使用場(chǎng)景、統(tǒng)一性等方面在下方留言、評(píng)論作出優(yōu)化和補(bǔ)充
約定
用戶體驗(yàn)是一個(gè)值得終身研究的課題,眾人拾柴火焰高,這里將公布對(duì)本文作出貢獻(xiàn)的思否開發(fā)者及其個(gè)人主頁(yè)鏈接
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://hztianpu.com/yun/102100.html
摘要:具體用法其中表示數(shù)組元素的值,表示數(shù)組元素的下標(biāo),表示包含該元素的數(shù)組。這里采用隨機(jī)函數(shù)來(lái)獲取數(shù)組的下標(biāo),函數(shù)是獲取之間的數(shù),函數(shù)是向下取整,這樣就可以隨機(jī)獲取相應(yīng)的下標(biāo)數(shù)。小程序中的模板就很好地幫我們解決了這個(gè)問題,并通過屬性來(lái)實(shí)現(xiàn)調(diào)用。 在微信小程序的開發(fā)過程中,當(dāng)你想要實(shí)現(xiàn)不同頁(yè)面間的數(shù)據(jù)綁定,卻為此抓耳饒腮時(shí),不妨讓微信小程序與filter 來(lái)一場(chǎng)完美的邂逅,相信會(huì)給你帶來(lái)別樣...
摘要:小程序的基礎(chǔ)庫(kù)不會(huì)被打包在某個(gè)小程序的代碼包里邊,它會(huì)被提前內(nèi)置在微信客戶端。小程序沒有重啟的概念當(dāng)小程序進(jìn)入后臺(tái),客戶端會(huì)維持一段時(shí)間的運(yùn)行狀態(tài),超過一定時(shí)間后目前是分鐘會(huì)被微信主動(dòng)銷毀當(dāng)短時(shí)間內(nèi)連續(xù)收到兩次 寫作背景 接觸小程序有一段時(shí)間了,總得來(lái)說(shuō)小程序開發(fā)門檻比較低,但其中基本的運(yùn)行機(jī)制和原理還是要懂的。比如我在面試的時(shí)候問到一個(gè)關(guān)于小程序的問題,問小程序有window對(duì)象嗎?...
摘要:具體調(diào)用參考接口請(qǐng)求封裝函數(shù)一般在中實(shí)現(xiàn)微信自帶的網(wǎng)絡(luò)請(qǐng)求方法調(diào)用接口請(qǐng)求函數(shù)如在中首先需要獲取應(yīng)用實(shí)例調(diào)用數(shù)據(jù)請(qǐng)求在函數(shù)中聲明的一個(gè)全局變量,接下來(lái)使用點(diǎn)語(yǔ)法直接調(diào)用請(qǐng)求下來(lái)的值就可以了。 如何向微信小程序?qū)隓EMO源碼: 參考方法 參考學(xué)習(xí)小程序官方文檔 小程序官方文檔 小程序目錄簡(jiǎn)介 app.json :設(shè)置一些工程全局的量.js : 寫一些函數(shù)邏輯.wxml: 調(diào)用.js中寫...
摘要:具體調(diào)用參考接口請(qǐng)求封裝函數(shù)一般在中實(shí)現(xiàn)微信自帶的網(wǎng)絡(luò)請(qǐng)求方法調(diào)用接口請(qǐng)求函數(shù)如在中首先需要獲取應(yīng)用實(shí)例調(diào)用數(shù)據(jù)請(qǐng)求在函數(shù)中聲明的一個(gè)全局變量,接下來(lái)使用點(diǎn)語(yǔ)法直接調(diào)用請(qǐng)求下來(lái)的值就可以了。 如何向微信小程序?qū)隓EMO源碼: 參考方法 參考學(xué)習(xí)小程序官方文檔 小程序官方文檔 小程序目錄簡(jiǎn)介 app.json :設(shè)置一些工程全局的量.js : 寫一些函數(shù)邏輯.wxml: 調(diào)用.js中寫...
閱讀 644·2021-09-03 00:22
閱讀 1521·2021-08-03 14:03
閱讀 2258·2021-07-25 21:37
閱讀 819·2019-08-30 13:18
閱讀 2021·2019-08-29 16:19
閱讀 2828·2019-08-29 13:22
閱讀 1446·2019-08-29 12:16
閱讀 2713·2019-08-26 12:16