微信小程序|表單數據綁定及提示彈窗
- 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
實習編輯 | 王楠嵐
責 編 | 吳怡辰
