歡迎點擊「算法與編程之美」↑關注我們！
本文首發於微信公衆號："算法與編程之美"，歡迎關注，及時瞭解更多此係列文章。
歡迎加入團隊圈子！與作者面對面！直接點擊！
問題描述
表單在小程序中非常常見，幾乎每一個小程序都會有表單的界面。一些登錄界面，身份驗證界面，都是由表單來填寫信息的。表單的內容有很多，提示性的輸入框，手機號碼短信驗證的輸入框以及錯誤提示輸入框等。那麼應該如何來設置一個完整的表單界面呢？
解決方案
不同的輸入框類型構成了一個完整的表單，需要對不同的輸入框進行設置。在json中對相關組件的引入，wxml中進行API的參數配置。
1.在json中調用van-field組件。
代碼示例：
"usingComponents": { "van-field": "/dist/field/index" } |
2.在wxml調用表單組件並對API參數的配置。
Value爲當前輸入的值，required設置表單必填星號，clearable設置是否啓用清除控件，label輸入框左側的文本，placeholder輸入框爲空時的佔位符，error將輸入內容標紅，border是否顯示內邊框。
代碼示例：
<van-cell-group> <van-field value="{{ number }}" required clearable label="學號" icon="question-o" placeholder="請輸入學號" bind:click-icon="onClickIcon" /> </van-cell-group> <van-cell-group> <van-field value="{{ username }}" label="用戶名" placeholder="請輸入用戶名" error /> <van-field value="{{ phone }}" label="手機號" placeholder="請輸入手機號" error-message="手機號格式錯誤" border="{{ false }}" /> </van-cell-group> <van-cell-group> <van-field value="{{ sms }}" center clearable label="短信驗證碼" placeholder="請輸入短信驗證碼" border="{{ false }}" use-button-slot > <button slot="button" size="mini" type="primary">發送驗證碼</button> </van-field> </van-cell-group>
|
圖 1 效果圖
結語
設置表單的時候一定要根據不同的要求對API的參數進行配置。一個簡單的輸入框僅僅需要一個field標籤就夠了，但常見的輸入框都是五花八門的，這些樣式都是由表單的配置參數來設置的，這樣就需要掌握熟悉這些參數的性質。
END
實習編輯 | 王文星
責 編 | 江汪霖
where2go 團隊
微信號：算法與編程之美
長按識別二維碼關注我們!
溫馨提示：點擊頁面右下角“寫留言”發表評論，期待您的參與！期待您的轉發！