微信小程序開發問答《六十九》radio樣式不(bù)能自定義 & 多個(gè)input如何方便的(de)獲取提交
發表時(shí)間:2021-5-11
發布人(rén):融晨科技
浏覽次數:85
如圖,這(zhè)個(gè)勾我想改成實色的(de),不(bù)需要(yào / yāo)勾,并且要(yào / yāo)把綠色換掉,試了(le/liǎo)下好像不(bù)行,把微信提供的(de)公共css都去掉了(le/liǎo),class也(yě)去掉了(le/liǎo)都不(bù)行。。難道(dào)就(jiù)不(bù)能改嗎?
答:我以(yǐ)前用的(de)時(shí)候記得:checked選擇符是(shì)沒用的(de),我是(shì)直接用display:none隐藏掉,然後用新标簽做的(de)
<radio-group bindchange="radioChange">
<label class="ui-radio {{item.checked==true?'active':''}}" wx:for="{{items}}>
{{item.value}} " checked="{{item.checked}}">radio>
<text class="text">{{item.name}}text>
label>
radio-group>
.ui-radio radio,.ui-radio checkbox {
display: none;
}
.ui-radio .text {
/*設計樣式*/
}
.ui-radio.checked .text {
/*設計樣式*/
}
Page({
data: {
items: [
{value: 'USA', name: '美國(guó)'},
{value: 'CHN', name: '中國(guó)', checked: 'true'},
{value: 'BRA', name: '巴西'},
{value: 'JPN', name: '日本'},
{value: 'ENG', name: '英國(guó)'},
{value: 'FRA', name: '法國(guó)'},
]
},
radioChange: function(e) {
console.log('radio發生change事件,攜帶value值爲(wéi / wèi):', e.detail.value)
var items = this.data.items;
for (var i = 0, len = items.length; i < len; ++i) {
items[i].checked = items[i].value == e.detail.value
}
this.setData({
items: items
});
}
})
把 radio
元素隐藏, 寬度設爲(wéi / wèi) 0, 切兩張圖片或者 svg,用 label
元素的(de) background
屬性自定義 radio
.
2、微信小程序中多個(gè)input如何方便的(de)獲取, 檢測驗證然後提交?(雙向綁定?)
随便舉個(gè)例子(zǐ),上(shàng)面四個(gè)表單,做到(dào)
提交前進行檢測是(shì)否爲(wéi / wèi)空,是(shì)否正确(如18位身份證,11位手機号等等)
其實用雙向綁定非常合适,可是(shì)似乎小程序中并沒有像vue中的(de)雙向綁定操作。
那麽,我打算用,bindBlur事件,針對每個(gè)input都綁定這(zhè)個(gè)函數,然後在(zài)處理函數中把value存起來(lái),,提交前,檢測這(zhè)些值即可。
但是(shì):這(zhè)樣的(de)話,有多少個(gè)input就(jiù)得些多少個(gè)這(zhè)樣的(de)事件,逐一處理并存儲,未免太不(bù)優雅。
想問問大(dà)家,一般像這(zhè)樣常見的(de)需求,最佳實踐是(shì)什麽,或者說(shuō),大(dà)家是(shì)如何處理的(de)。
答:javascript有原生驗證api你可以(yǐ)直接用,沒有框架的(de)時(shí)候就(jiù)用原生,我是(shì)這(zhè)麽做的(de)
3、摩拜單車小程序微信授權注冊時(shí)可以(yǐ)直接發送驗證碼(由【騰訊科技】發送)給用戶,是(shì)哪個(gè)接口?
發現摩拜單車微信小程序通過“微信用戶快速登錄”時(shí),會先彈屏“微信手機号”授權,然後用戶“确認授權”後,彈框“請填寫手機短信驗證碼”,想問下是(shì)怎麽實現的(de),通過哪個(gè)接口?
答:手機号快速填寫及會員卡開卡組件https://mp.weixin.qq.com/debu...非個(gè)人(rén)開發者的(de)小程序完成認證後即可使用。在(zài)新用戶注冊、聯系方式登記等必要(yào / yāo)場景下,開發者均可在(zài)頁面上(shàng)部署手機号快速填寫組件。
用戶點擊組件,完成彈窗授權後,即可直接将微信綁定的(de)手機号填入,絕大(dà)部分情況下無需再進行短信驗證碼校驗。若用戶不(bù)願提供微信綁定的(de)手機号,開發者需提供手動輸入手機号功能。