<强>微信小程序输入表单与redio及下拉列表的使用实例
一个简单的预约类型的表,单效果
主要代码:
& lt;形式bindsubmit=癰indSave”比;
& lt;视图类=癴orm-box”比;
& lt;视图类=皉ow-wrap”比;
& lt;视图类="标签"祝辞联系人& lt;/view>
& lt;视图类=北昵┥稀氨?
& lt;输入name="用户名"类=笆淙搿崩嘈?拔谋尽闭嘉环?靶彰? value=" https://www.yisu.com/zixun/{{addressData.userName}} "/比;
& lt;/view>
& lt;/view>
& lt;视图类=皉ow-wrap”比;
& lt;视图类="标签"祝辞性别& lt;/view>
& lt;单选组合类="单选组合" bindchange=皉adioChange”比;
& lt;标签类=肮悴ァ钡奶炱?为=皗{物品}}”比;
& lt;广播值=" https://www.yisu.com/zixun/{{item.name}}”检查="{{项目。检查}}"/在{{item.value}}
& lt;/label>
& lt;/radio-group>
& lt;/view>
& lt;视图类=皉ow-wrap”比;
& lt;视图类="标签"祝辞手机号码& lt;/view>
& lt;视图类=北昵┥稀氨?
& lt;输入名称="移动" class="输入"最大长度=笆弧崩嘈?笆俊闭嘉环?笆晃皇只怕? value=" https://www.yisu.com/zixun/{{addressData.mobile}} "/比;
& lt;/view>
& lt;/view>
& lt;视图类=皉ow-wrap”比;
& lt;视图类="标签"祝辞预约项目& lt;/view>
& lt;选择bindchange=" bindCasPickerChange " value=" https://www.yisu.com/zixun/{{casIndex1}}”范围=皗{casArray}}”比;
& lt; view>
& lt; text> {{casArray [casIndex]}} & lt;/text>
& lt;/view>
& lt;/picker>
& lt;/view>
& lt;/view>
& lt;视图类=癰tn-tyc”比;
& lt;按钮大?"迷你" bindtap=皌apAddCart”类=疤峤弧崩嘈?爸鳌眆ormType=疤峤弧弊４翘峤辉ぴ? lt;/button>
& lt;/view>
& lt;按钮大?"迷你" bindtap=皌lp_phone”类=暗缁啊崩嘈?爸鳌痹诓Υ虻缁? lt;/button>
& lt;/form>
之前
。js文件
数据:{
绰号:“”,
avatarUrl:“”,
casArray:['双眼皮’,‘TBM’,‘隆胸”、“减肥”,“其他”),
用户名:”,
手机:”,
性别:女,
casIndex: 0,
项目:(
{名称:“男性”,值:'男'},
{名称:“女性”,价值:“女”,检查:“真正的”},
]
},
radioChange:函数(e) {
控制台。日志('值:' e.detail.value)
this.setData ({
性别:e.detail.value
}）
},/* *
*生命周期函数——监听页面加载
*/bindCasPickerChange:函数(e) {
console.log (this.data.casArray);
控制台。日志('下拉选择的是”,this.data.casArray [e.detail.value])
this.setData ({
casIndex: e.detail.value
}）
},
之前
具体的表单样式可以自己调整,wxs样式文件代码不写了
参照官方文档形式组件
https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
