微信小程序input表单与redio及下拉列表实例详解

本文主要和大家介绍微信小程序 input表单与redio及下拉列表的使用实例的相关资料,希望通过本文能帮助到大家，需要的朋友可以参考下，希望能帮助到大家。

微信小程序 input表单与redio及下拉列表的使用实例

一个简单的预约类型的表单，效果

主要代码：

 form bindsubmit= bindSave 
 view >
.js文件

 data: {
 nickName: ,
 avatarUrl: ,
 casArray: [ #39;双眼皮 #39;, #39;TBM #39;, #39;隆胸 #39;, #39;减肥 #39;, #39;qita #39;],
 userName: #39; #39;,
 mobile: #39; #39;,
 Gender: #39;female #39;,
 casIndex: 0,
 items: [
 { name: #39;male #39;, value: #39;男 #39; },
 { name: #39;female #39;, value: #39;女 #39;, checked: #39;true #39; },
 radioChange: function (e) {
 console.log( #39;值： #39;, e.detail.value)
 this.setData({
 Gender: e.detail.value
 * 生命周期函数--监听页面加载
 bindCasPickerChange: function (e) {
 console.log(this.data.casArray);
 console.log( #39;下拉选择的是 #39;, this.data.casArray[e.detail.value])
 this.setData({
 casIndex: e.detail.value
 },
具体的表单样式可以自己调整，wxss样式文件代码不写了
参照官方文档form组件
https://mp.weixin.qq.com/debug/wxadoc/dev/component/form.html
相关推荐：

html的input表单上传文件的方法
以上就是微信小程序input表单与redio及下拉列表实例详解的详细内容，更多请关注php中文网其它相关文章！
 
  
 微信app下载
 
微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！