摘要:作者來自原文地址主要通過輸入事件配合的動(dòng)態(tài)改變實(shí)現(xiàn)這種效果。實(shí)際調(diào)試過程中,組件事件觸發(fā)后回調(diào)的對(duì)象,在模擬器中含有屬性,在真機(jī)中測(cè)過安卓,沒測(cè)過卻沒有該屬性,最后選擇對(duì)象中的屬性的值的長度來同步輸入的位數(shù)。事件最好不要添加改變的代碼。
作者:jeffer
來自:原文地址
主要通過input輸入事件配合css的transform動(dòng)態(tài)改變實(shí)現(xiàn)這種效果。
實(shí)際調(diào)試過程中,input組件bindinput事件觸發(fā)后回調(diào)的detail對(duì)象,在模擬器中含有cursor屬性,在真機(jī)中(測(cè)過安卓,ios沒測(cè)過)卻沒有該屬性,最后選擇detail對(duì)象中的value屬性的值的長度來同步輸入的位數(shù)。
bindfocus事件最好不要添加改變css的代碼 。
預(yù)覽圖片:
JS:
//index.js //獲取應(yīng)用實(shí)例 var app = getApp() Page({ data: { v_username_border:"", //用戶輸入框底部border樣式 v_pwd_border:"", // 密碼輸入框底部border樣式 v_float_username:"", // 浮動(dòng)文字字transform 樣式 v_float_pwd:"", num_current_un:0, // 當(dāng)前輸入的文本位數(shù) sp_num_current_un:"", // 當(dāng)前輸入文本位數(shù)超過限制時(shí)的樣式 isPwdError:false // 提交時(shí) 密碼輸入錯(cuò)誤時(shí)的文本提示 }, onLoad: function () { console.log("onLoad") }, // 用戶名輸入框獲取焦點(diǎn)時(shí)事件回調(diào) usernameFocus:function(e){ var that = this; console.log(e.detail) }, // 用戶名輸入框輸入時(shí)事件回調(diào) usernameInput:function(e){ console.log(e.detail) this.setData({ v_username_border:"border-bottom:1px solid red", num_current_un:e.detail.value.length }) if(e.detail.value.length!=0){ this.setData({ v_float_username:"color:red ;transform: translateY(-18.5px)", sp_num_current_un:"color:lightseagreen;" }) if(e.detail.value.length>20){ this.setData({ sp_num_current_un:"color:orangered;" }) } }else{ this.setData({ v_float_username:"transform: translateY(0px)", }) } }, // // 用戶名輸入框失去焦點(diǎn)時(shí)回調(diào) usernameBlur:function(e){ console.log("onBlur") this.setData({ v_username_border:"border-bottom:1px solid grey" }) }, pwdFocus:function(e){ console.log("onFocus") }, pwdInput:function(e){ this.setData({ v_pwd_border:"border-bottom:1px solid red", isPwdError:false }) console.log(e.detail) if(e.detail.value.length!=0){ this.setData({ v_float_pwd:"color:red ; transform: translateY(-18.5px)", }) }else{ this.setData({ v_float_pwd:"transform: translateY(0px)", }) } }, pwdBlur:function(e){ console.log("onBlur") this.setData({ v_pwd_border:"border-bottom:1px solid grey; " }) }, // 登錄按鈕模擬表單提交 可用form組件代替 onLogin:function(e){ this.setData({ isPwdError:true }) } })
源碼地址https://github.com/jeffer0323...
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/81324.html
摘要:作者來自原文地址主要通過輸入事件配合的動(dòng)態(tài)改變實(shí)現(xiàn)這種效果。實(shí)際調(diào)試過程中,組件事件觸發(fā)后回調(diào)的對(duì)象,在模擬器中含有屬性,在真機(jī)中測(cè)過安卓,沒測(cè)過卻沒有該屬性,最后選擇對(duì)象中的屬性的值的長度來同步輸入的位數(shù)。事件最好不要添加改變的代碼。 作者:jeffer 來自:原文地址 主要通過input輸入事件配合css的transform動(dòng)態(tài)改變實(shí)現(xiàn)這種效果。 實(shí)際調(diào)試過程中,input組件bi...
摘要:組件三要素組件的三要素就是小程序定義的三種文件因?yàn)楸旧砭褪悄K化開發(fā),所以這天然有利于組件化。日歷組件所以利用和就可以打造一款組件了。這樣就完成了一個(gè)組件編寫,任何需要用到的地方都可以引入了。 背景 先談下背景,在做一款產(chǎn)品的時(shí)候需要用到日期選擇器,但是官方的卻不太滿足需求,因?yàn)闊o法選擇農(nóng)歷啊。所以自己來造一個(gè)輪子好了,造輪子之前先想想啊,萬一以后多個(gè)地方要用到,多個(gè)項(xiàng)目要用,怎么辦呢...
摘要:因?yàn)檠h(huán)中當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為,當(dāng)前項(xiàng)的變量名默認(rèn)為。包含文章視頻源代碼原創(chuàng)新書移動(dòng)前端高效開發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。最新活動(dòng)報(bào)名地址與天天練口語小程序總榜排名第四教育類排名第一的研發(fā)團(tuán)隊(duì),面對(duì)面溝通交流。 § 視圖與數(shù)據(jù)關(guān)聯(lián) 本文配套視頻地址:https://v.qq.com/x/page/z0554... 開始前請(qǐng)把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工...
摘要:因?yàn)檠h(huán)中當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為,當(dāng)前項(xiàng)的變量名默認(rèn)為。包含文章視頻源代碼原創(chuàng)新書移動(dòng)前端高效開發(fā)實(shí)戰(zhàn)已在亞馬遜京東當(dāng)當(dāng)開售。最新活動(dòng)報(bào)名地址與天天練口語小程序總榜排名第四教育類排名第一的研發(fā)團(tuán)隊(duì),面對(duì)面溝通交流。 § 視圖與數(shù)據(jù)關(guān)聯(lián) 本文配套視頻地址:https://v.qq.com/x/page/z0554... 開始前請(qǐng)把 ch3-3 分支中的 code/ 目錄導(dǎo)入微信開發(fā)工...
閱讀 3724·2021-10-13 09:39
閱讀 3789·2021-09-24 09:48
閱讀 1189·2021-09-01 10:30
閱讀 2526·2019-08-30 15:55
閱讀 1774·2019-08-29 16:39
閱讀 2296·2019-08-26 13:55
閱讀 3050·2019-08-26 12:23
閱讀 1634·2019-08-26 11:59