建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
- 使用組件注意事項(xiàng)
- button 組件
- label 組件
- 常見(jiàn)問(wèn)題
- Q：為什么 label 組件不支持綁定 input 組件和 textarea 組件？
- switch 組件
- textarea組件
- 表單校驗(yàn)
- 組合能力示例
使用組件注意事項(xiàng)
在使用小程序組件的時(shí)候，有一些開(kāi)發(fā)實(shí)現(xiàn)的問(wèn)題需要被注意。
為革吉等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及革吉網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為成都做網(wǎng)站、成都網(wǎng)站建設(shè)、革吉網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！
button 組件
為了處理移動(dòng)端的 1px 問(wèn)題，默認(rèn)類(lèi)型的 button 組件在設(shè)置邊框樣式時(shí)使用了偽類(lèi)。
場(chǎng)景：需要設(shè)置 button 邊框樣式覆蓋默認(rèn)樣式。
解決方法：開(kāi)發(fā)者可以通過(guò)偽類(lèi)設(shè)置樣式來(lái)覆蓋默認(rèn)的邊框樣式。
代碼示例
- SWAN
- CSS
按鈕 default
.btn {position: absolute;top: 50px;}.btn:after {border: 1px solid #f00;}
label 組件
label 組件使用 for 屬性找到對(duì)應(yīng)的 ID（必須寫(xiě) for），當(dāng)點(diǎn)擊時(shí)，就會(huì)觸發(fā)對(duì)應(yīng)的控件。目前可以綁定的控件有：button、checkbox、radio、switch 。
場(chǎng)景：button/checkbox/radio/switch 組件較小的時(shí)候，可點(diǎn)擊區(qū)域變小，導(dǎo)致用戶(hù)體驗(yàn)不好。
解決方法：使用 label 組件包裹，通過(guò)控制 label 組件的寬高，可以擴(kuò)大控制熱區(qū)。
代碼示例
- SWAN
- CSS
智能小程序
.label {display: block;padding: .2rem;}
常見(jiàn)問(wèn)題
Q：為什么 label 組件不支持綁定 input 組件和 textarea 組件？
A：這是因?yàn)闉榱颂峁└迂S富的功能和更接近于原生的體驗(yàn)，input 和 textarea 是通過(guò)原生組件的形式實(shí)現(xiàn)的，關(guān)于原生組件具體可以參考原生組件說(shuō)明，而 label 是非原生組件，因此暫時(shí)不支持綁定 input 組件和 textarea 組件。
switch 組件
switch 組件默認(rèn)大小為 38px * 23px ，但不能通過(guò)設(shè)置 width 和 height 進(jìn)行調(diào)整。
場(chǎng)景：開(kāi)發(fā)者想調(diào)整 switch 組件的大小，直接設(shè)置 width 和 height 沒(méi)有效果。
解決方法：可以通過(guò) CSS scale 縮放進(jìn)行設(shè)置。
代碼示例
- CSS
swan-switch {/* 通過(guò)縮放調(diào)整大小 */transform: scale(.5);/* 圖標(biāo)寬度并不會(huì)改變 *//* width: 1.1rem; */}
textarea組件
textarea 的 blur 事件會(huì)晚于頁(yè)面上的 tap 事件。
場(chǎng)景：有一個(gè)表單（textarea + button），獲取表單內(nèi)容用的是 bindblur 事件。因?yàn)?textarea 的 blur 事件會(huì)晚于頁(yè)面上的 tap 事件，所以輸入內(nèi)容后立即點(diǎn)擊 button 是不能獲得數(shù)據(jù)的。
解決方法：可以使用 form 的 bindsubmit 。
代碼示例
- SWAN
- JS
bindFormsubmit(e) {console.log(e.detail.value.textarea)}
表單校驗(yàn)
合理使用校驗(yàn)邏輯對(duì)表單的填寫(xiě)更友好。
場(chǎng)景：填寫(xiě) form 表單時(shí)做校驗(yàn)。
解決方法：先初始化表單校驗(yàn)規(guī)則，由 bindblur 事件觸發(fā)自定義校驗(yàn)方法，進(jìn)行校驗(yàn)。
代碼示例
- JSON
- SWAN
- JS
// 1. 在 data 里初始化表單項(xiàng)數(shù)據(jù)，并定義校驗(yàn)的正則表達(dá)式，例如校驗(yàn)電話(huà)：// （value: 對(duì)應(yīng)的輸入值； rulse：校驗(yàn)規(guī)則； errorInfo: 校驗(yàn)失敗的提示信息；）model: {phone: {value: '',rulse: /^[1][3,4,5,6,7,8,9][0-9]{9}$/,errorInfo: {errFlag: false,errContent: '請(qǐng)輸入有效的手機(jī)號(hào)'}}}
bindBlur(e) {let value = e.detail.value;let id = e.currentTarget.dataset.id;let rulse = this.data.model[id].rulse;this.validate(rulse, value, id);},// 3. 寫(xiě)一個(gè)自定義校驗(yàn)方法，驗(yàn)證正則validate(rulse, value, id) {let tes = new RegExp(rulse)// 校驗(yàn)通過(guò)// ...// 校驗(yàn)未通過(guò)，顯示錯(cuò)誤信息// ...}
組合能力示例
智能小程序，還提供了許多組合能力示例，例如查詢(xún)類(lèi)服務(wù)表單模板、辦理類(lèi)服務(wù)（單流程）表單模板、辦理類(lèi)服務(wù)（多流程）表單模板。模板內(nèi)包含的組件豐富，覆蓋大多數(shù)查詢(xún)類(lèi)服務(wù)項(xiàng)場(chǎng)景，并且有完整的校驗(yàn)規(guī)則，示例和源代碼請(qǐng)參考對(duì)應(yīng)的組合能力示例模板。
名稱(chēng)欄目：創(chuàng)新互聯(lián)百度小程序教程：使用組件注意事項(xiàng)
標(biāo)題鏈接：http://www.dlmjj.cn/article/dpdsjdc.html
