微信小程序> 小程序表单使用~~

小程序表单使用~~

浏览量:605 时间: 来源:傻小胖

一、小程序有提供专门的表单托管,和ng,vue,ant一样可以一起提交所有表单的数据

直接看代码:

wxml:

form bindsubmit="formSubmit" bindreset="formReset"  view class="section section_gap"    view class="section__title"switch/view    switch name="switch"/  /view  view class="section section_gap"    view class="section__title"slider/view    slider name="slider" show-value /slider  /view  view class="section"    view class="section__title"input/view    input name="input" placeholder="please input here" /  /view  view class="section section_gap"    view class="section__title"radio/view    radio-group name="radio-group"      labelradio value="radio1"/radio1/label      labelradio value="radio2"/radio2/label    /radio-group  /view  view class="section section_gap"    view class="section__title"checkbox/view    checkbox-group name="checkbox"      labelcheckbox value="checkbox1"/checkbox1/label      labelcheckbox value="checkbox2"/checkbox2/label    /checkbox-group  /view  view class="btn-area"    button formType="submit"Submit/button  /view/form

page的逻辑部分:

const page = {  onLoad() {    wx.setNavigationBarTitle({ title: '表单测试' });  },  data: {},   formSubmit: function(event) {    console.log('form发生了submit事件,携带数据为:', e.detail.value)  },};

注意:wxml里面的bindsubmit的值就是提交管理整个表单值得函数,botton只是告诉你这个是提交的action,触发的是bindsubmit所对应的函数

也就说:

button formType="submit"Submit/button只是触发提交的动作发生,真正的触发的是bindsubmit所赋值的formSubmit函数对表单数据进行提交

bindsubmit="formSubmit"

 

例子来源于官网

https://developers.weixin.qq.com/miniprogram/dev/component/form.html

效果:

 

 

 

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎