小程序如何获取多个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 相关文章推荐
jquery提取元素里的纯文本不包含span等里的内容
Sep 30 Javascript
判断文档离浏览器顶部的距离的方法
Jan 08 Javascript
浅析javascript的间隔调用和延时调用
Nov 12 Javascript
Js+Ajax,Get和Post在使用上的区别小结
Jun 08 Javascript
JS获取随机数和时间转换的简单实例
Jul 10 Javascript
js仿小米手机上下滑动效果
Feb 05 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
基于js 字符串indexof与search方法的区别(详解)
Dec 04 Javascript
Vue开发环境跨域访问问题
Jan 22 Javascript
Vue之封装公用变量以及实现方式
Jul 31 Javascript
vue3弹出层V3Popup实例详解
Jan 04 Vue.js
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 缓存实现代码及详细注释
2010/05/16 PHP
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
js中settimeout方法加参数的使用实例
2014/02/27 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
2015/03/26 Javascript
优化RequireJS项目的相关技巧总结
2015/07/01 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
2015/09/02 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
2016/01/08 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
Vue.js用法详解
2017/11/13 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
IE11下处理Promise及Vue的单项数据流问题
2019/07/24 Javascript
微信小程序报错: thirdScriptError的错误问题
2020/06/19 Javascript
[46:02]DOTA2上海特级锦标赛D组资格赛#2 Liquid VS VP第二局
2016/02/28 DOTA
[43:51]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS Secret
2018/03/31 DOTA
TensorFlow实现AutoEncoder自编码器
2018/03/09 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
利用Python实现在同一网络中的本地文件共享方法
2018/06/04 Python
tensorflow 用矩阵运算替换for循环 用tf.tile而不写for的方法
2018/07/27 Python
Python判断变量名是否合法的方法示例
2019/01/28 Python
python 解决print数组/矩阵无法完整输出的问题
2020/02/19 Python
django 取消csrf限制的实例
2020/03/13 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
python 贪心算法的实现
2020/09/18 Python
CSS3模块的目前的状况分析
2010/02/24 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
Belstaff英国官方在线商店:Belstaff.co.uk
2021/02/09 全球购物
酒店执行总经理岗位职责
2013/12/15 职场文书
高中地理教学反思
2014/01/29 职场文书
绿色城市实施方案
2014/03/19 职场文书
骨干教师考核评语
2014/12/31 职场文书
网络舆情信息简报
2015/07/21 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
MySQL中order by的执行过程
2022/06/05 MySQL