小程序如何获取多个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 处理 URL 的两个函数代码
Aug 13 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
完美的js图片轮换效果
Feb 05 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
js实现登录框鼠标拖拽效果
Mar 09 Javascript
vue引入swiper插件的使用实例
Jul 19 Javascript
node中koa中间件机制详解
Aug 22 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
Vue.js 实现地址管理页面思路详解(地址添加、编辑、删除和设置默认地址)
Dec 11 Javascript
javascript实现滚动条效果
Mar 24 Javascript
js实现拾色器插件(ColorPicker)
May 21 Javascript
在vue中通过render函数给子组件设置ref操作
Nov 17 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
多文件上传的例子
2006/10/09 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
php表单提交与$_POST实例分析
2015/01/26 PHP
Zend Framework框架路由机制代码分析
2016/03/22 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
PHP类型约束用法示例
2016/09/28 PHP
jquery text,radio,checkbox,select操作实现代码
2009/07/09 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
JQuery在循环中绑定事件的问题详解
2016/06/02 Javascript
jQuery表单验证简单示例
2016/10/17 Javascript
微信小程序 页面跳转传递值几种方法详解
2017/01/12 Javascript
微信小程序 列表的上拉加载和下拉刷新的实现
2017/04/01 Javascript
d3.js实现立体柱图的方法详解
2017/04/28 Javascript
JS判断一个数是否是水仙花数
2017/06/11 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
Vue-Ant Design Vue-普通及自定义校验实例
2020/10/24 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
在Python中使用正则表达式的方法
2015/08/13 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python实现的拉格朗日插值法示例
2019/01/08 Python
在Pycharm中设置默认自动换行的方法
2019/01/16 Python
利用python在excel里面直接使用sql函数的方法
2019/02/08 Python
python远程连接MySQL数据库
2019/04/19 Python
python集合常见运算案例解析
2019/10/17 Python
keras输出预测值和真实值方式
2020/06/27 Python
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
Nordgreen英国官网:斯堪的纳维亚设计师手表
2018/10/24 全球购物
应届本科生推荐信范文
2013/12/25 职场文书
研究生导师推荐信
2014/09/06 职场文书
党员三严三实心得体会
2014/10/13 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
一文读懂navicat for mysql基础知识
2021/05/31 MySQL
nginx作grpc的反向代理踩坑总结
2021/07/07 Servers