小程序表单使用~~-美观的表单小程序-小程序表单制作-即速应用

小程序表单使用~~-美观的表单小程序-小程序表单制作

浏览量：2717 时间：2020-04-01 来源：傻小胖

1.一、小程序有提供专门的表单托管，和ng,vue,ant一样可以一起提交所有表单的数据
2.直接看代码：
3.wxml:
formbindsubmit="formSubmit"bindreset="formReset"viewclass="sectionsection_gap"viewclass="section__title"switch/viewswitchname="switch"//viewviewclass="sectionsection_gap"viewclass="section__title"slider/viewslidername="slider"show-value/slider/viewviewclass="section"viewclass="section__title"input/viewinputname="input"placeholder="pleaseinputhere"//viewviewclass="sectionsection_gap"viewclass="section__title"radio/viewradio-groupname="radio-group"labelradiovalue="radio1"/radio1/labellabelradiovalue="radio2"/radio2/label/radio-group/viewviewclass="sectionsection_gap"viewclass="section__title"checkbox/viewcheckbox-groupname="checkbox"labelcheckboxvalue="checkbox1"/checkbox1/labellabelcheckboxvalue="checkbox2"/checkbox2/label/checkbox-group/viewviewclass="btn-area"buttonformType="submit"Submit/button/view/form
4.page的逻辑部分：
constpage={onLoad(){wx.setNavigationBarTitle({title:'表单测试'});},data:{},formSubmit:function(event){console.log('form发生了submit事件，携带数据为：',e.detail.value)},};
5.注意：wxml里面的bindsubmit的值就是提交管理整个表单值得函数，botton只是告诉你这个是提交的action,触发的是bindsubmit所对应的函数
6.也就说：
7.buttonformType="submit"Submit/button只是触发提交的动作发生，真正的触发的是bindsubmit所赋值的formSubmit函数对表单数据进行提交
8.bindsubmit="formSubmit"
9.例子来源于官网
10.https://developers.weixin.qq.com/miniprogram/dev/component/form.html
11.效果：