微信小程式|表單數據綁定及提示彈窗
- 2020 年 2 月 21 日
- 筆記
問題描述
一個表單如何進行數據綁定？
表單需要提交資訊時彈出的提示彈窗是如何實現的？
一個小程式應用，總是會出現註冊時填寫個人介面的情況，這個介面就是一個雙向數據綁定的表單，而如何實現一個表單的數據綁定以及如何在提交資訊時跳出一個提示彈窗，則需要我們對製作表單的相關標籤及屬性以及樣式的配置有深入的了解和掌握。
解決方案
（1）製作一個表單
製作表單時，先是用一個form標籤對整體表單進行一個基礎配置，然後給view標籤不同的類名設置wxss樣式。需要對錶單填寫時，通常運用<input> placeholder屬性，來規定可描述輸入欄位預期值的簡短的提示資訊。如以下程式碼中，在填寫「姓名」的文本框裡面會出現提示資訊「請輸入你的姓名」。如果要改變聚焦時游標離軟鍵盤的距離，可以用一個微信小程式特有的cursor-spacing屬性。
「姓名」填寫程式碼展示
|
<view class='input_w professional'> <text>姓名</text> <view class='input left'> <input placeholder='請輸入你的真實姓名' cursor-spacing='20' name='name'></input> </view> </view> |
|---|
（2）提交時的提示彈窗
資訊填寫完之後，提交時總是會跳出一個提示框，問你是否確定資訊準確無誤，這就需要一個button標籤設置一個按鈕用來開啟提交事件，然後需要設置一個formType屬性用於向伺服器發送表單數據。
提交按鈕配置
|
<button formType="submit" bindtap="modalcnt">提交</button> |
|---|
js綁定數據
|
modalcnt: function () { wx.showModal({ title: '提示', content: '確定資訊核實準確無誤？', success: function (res) { if (res.confirm) { console.log('用戶點擊確定') } else if (res.cancel) { console.log('用戶點擊取消') } } }) } |
|---|
（3）註冊個人資訊效果圖
圖 1表單效果圖
圖 2提示彈窗效果圖
結語
（1）在添加一個form標籤時，form必須有提交事件，如bindsubmit="back"。
（2）設置一個文本框時，如果填寫內容需要輸入多行，需要使用一個textarea標籤。
END
實習編輯 | 王楠嵐
責 編 | 吳怡辰
