您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)微信開發(fā)中input輸入框的示例分析的內(nèi)容。小編覺得挺實用的,因此分享給大家做個參考,一起跟隨小編過來看看吧。
input輸入框使用的頻率也是比較高的。。。樣式的話自己外面包裹個view自己定義。input屬性也不是很多,有需要自己慢慢測,嘗試
主要屬性:
wxml
<!--style的優(yōu)先級比class高會覆蓋和class相同屬性--> <view class="inputView" style="margin-top: 40% "> <input class="input" type="number" placeholder="請輸入賬號" placeholder-style="color: red" bindinput="listenerPhoneInput" /> </view> <view class="inputView"> <input class="input" password="true" placeholder="請輸入密碼" placeholder-style="color: red" bindinput="listenerPasswordInput"/> </view> <button style="margin-left: 15rpx; margin-right: 15rpx; margin-top: 50rpx; border-radius: 40rpx" type="primary" bindtap="listenerLogin">登錄</button>
js
Page({ /** * 初始化數(shù)據(jù) */ data:{ phone: '', password: '', }, /** * 監(jiān)聽手機號輸入 */ listenerPhoneInput: function(e) { this.data.phone = e.detail.value; }, /** * 監(jiān)聽密碼輸入 */ listenerPasswordInput: function(e) { this.data.password = e.detail.value; }, /** * 監(jiān)聽登錄按鈕 */ listenerLogin: function() { //打印收入賬號和密碼 console.log('手機號為: ', this.data.phone); console.log('密碼為: ', this.data.password); }, onLoad:function(options){ // 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù) }, onReady:function(){ // 頁面渲染完成 }, onShow:function(){ // 頁面顯示 }, onHide:function(){ // 頁面隱藏 }, onUnload:function(){ // 頁面關(guān)閉 } })
wxss
.input{ padding-left: 10px; height: 44px; } .inputView{ border: 2px solid red; border-radius: 40px; margin-left: 15px; margin-right: 15px; margin-top: 15px; }
感謝各位的閱讀!關(guān)于“微信開發(fā)中input輸入框的示例分析”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,讓大家可以學到更多知識,如果覺得文章不錯,可以把它分享出去讓更多的人看到吧!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。