小程序如何获取多个formId实现详解


Posted in Javascript onSeptember 20, 2019

很多人使用过form和button的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次“提交”,可以获取到多个formId

小程序如何获取多个formId实现详解

但是在今年3月份,这个投机取巧的方法(算是微信的一个bug)已经被微信修复,那么再使用这个方法,所拿到的formId都是相同的了,也就不符合我们的需求了

接下来给大家介绍另一种方法:

将form和button封装成组件模拟form submit,并把这个组件做成layout级,这样可以把整个页面包括在layout里面,利用事件自动冒泡的特性,只要点击了页面任一位置,就能获取到formId

1. 新建一个组件layout,wxml、wxss、js、json代码分别如下

<form bindsubmit="formSubmit" report-submit class="layout">
 <button formType="submit" class="button" hover-class="none">
  <view class="fixed"><slot></slot></view>
 </button>
</form>
.layout {
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  line-height: inherit;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  width: 100%;
  position: relative;
}
.layout .button{
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  line-height: inherit;
  -webkit-tap-highlight-color: #000;
  color: inherit;
  width: 100%;
  position: relative;
}
.layout .button .fixed{
  position:relative;
  z-index: 9999;
  width: 100%;
}
.layout .button:before,.layout .button:after{
  border-width: 0;
}
Component({
 methods: {
  formSubmit: function (e) {
   let formId = e.detail.formId
   console.log(formId)
  }
 }
})
{
 "component": true
}

2. 在app.json中,将layout添加为全局组件

"usingComponents": {
  "layout": "/components/layout/index"
 }

3. 在页面中使用

<layout>
 <view class="container">
  ...
 </view>
</layout>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 代码也可以变得优美的实现方法
Jun 22 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
May 06 Javascript
使用原生js写的一个简单slider
Apr 29 Javascript
MVC Ajax Helper或Jquery异步加载部分视图
Nov 29 Javascript
jQuery+CSS实现简单切换菜单示例
Jul 27 Javascript
浅谈React Native 中组件的生命周期
Sep 08 Javascript
Vue.js在数组中插入重复数据的实现代码
Nov 17 Javascript
详解vue axios用post提交的数据格式
Aug 07 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 #Javascript
使用Layui搭建后台管理界面的操作方法
Sep 20 #Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
Sep 20 #Javascript
小程序使用watch监听数据变化的方法详解
Sep 20 #Javascript
基于layui内置模块(element常用元素的操作)
Sep 20 #Javascript
解决Layui中templet中a的onclick参数传递的问题
Sep 20 #Javascript
解决layui动态添加的元素click等事件触发不了的问题
Sep 20 #Javascript
You might like
PHP中最容易忘记的一些知识点总结
2013/04/28 PHP
php限制文件下载速度的代码
2015/10/20 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
javascript jQuery插件练习
2008/12/24 Javascript
Javascript倒计时代码
2010/08/12 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
动态创建script标签实现跨域资源访问的方法介绍
2014/02/28 Javascript
js防止页面被iframe调用的方法
2014/10/30 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
Bootstrap简单表单显示学习笔记
2016/11/15 Javascript
基于JavaScript实现Tab选项卡切换效果
2016/11/24 Javascript
Bootstrap弹出框modal上层的输入框不能获得焦点问题的解决方法
2016/12/13 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
WdatePicker.js时间日期插件的使用方法
2017/07/26 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
关于JavaScript中高阶函数的魅力详解
2018/09/07 Javascript
nodejs npm错误Error:UNKNOWN:unknown error,mkdir 'D:\Develop\nodejs\node_global'at Error
2019/03/02 NodeJs
JS实现随机抽选获奖者
2019/11/07 Javascript
JS实现小星星特效
2019/12/24 Javascript
Python greenlet实现原理和使用示例
2014/09/24 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Numpy之文件存取的示例代码
2018/08/03 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
SKECHERS官方旗舰店:美国舒适运动休闲品牌
2017/12/22 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
西安夏日科技有限公司Java笔试题
2013/01/11 面试题
施工安全协议书
2013/12/11 职场文书
银行营业厅大堂经理岗位职责
2014/01/06 职场文书
工厂仓管员岗位职责范本
2014/07/17 职场文书
2014年教育教学工作总结
2014/11/13 职场文书
写给导师的自荐信
2015/03/06 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
企业法律事务工作总结
2015/08/11 职场文书
消防安全主题班会
2015/08/12 职场文书
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers