小程序如何获取多个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的Ajax请求实现局部刷新的简单实例
Feb 11 Javascript
8个超实用的jQuery功能代码分享
Jan 08 Javascript
jquery获取当前元素索引值用法实例
Jun 10 Javascript
js实现人才网站职位选择功能的方法
Aug 14 Javascript
js和jQuery设置Opacity半透明 兼容IE6
May 24 Javascript
JavaScript数据类型学习笔记分享
Sep 01 Javascript
jQuery插件ajaxFileUpload异步上传文件
Oct 19 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
妙用缓存调用链实现JS方法的重载
Apr 30 Javascript
Vue路由切换时的左滑和右滑效果示例
May 29 Javascript
详解JavaScript的内存空间、赋值和深浅拷贝
Apr 17 Javascript
Canvas跟随鼠标炫彩小球的实现
Apr 11 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写的基于Memcache的Queue实现代码
2011/11/27 PHP
linux下编译安装memcached服务
2014/08/03 PHP
实测jquery data()如何存值
2013/08/18 Javascript
node.js中的fs.fchmodSync方法使用说明
2014/12/16 Javascript
jquery实现鼠标滑过显示提示框的方法
2015/02/05 Javascript
javascript制作游戏开发碰撞检测的封装代码
2015/03/31 Javascript
快速掌握WordPress中加载JavaScript脚本的方法
2015/12/17 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
React Native仿美团下拉菜单的实例代码
2017/08/08 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
详解vue-cli3 中跨域解决方案
2019/04/10 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
2021/01/20 Javascript
django输出html内容的实例
2018/05/27 Python
python生成器与迭代器详解
2019/01/01 Python
实例详解Matlab 与 Python 的区别
2019/04/26 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
在Python中用GDAL实现矢量对栅格的切割实例
2020/03/11 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
一款基于css3的列表toggle特效实例教程
2015/01/04 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
美国家居装饰购物网站:Amanda Lindroth
2020/03/25 全球购物
职专应届生求职信
2013/11/16 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
C++程序员求职信
2014/05/07 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
大学生党员个人总结
2015/02/13 职场文书
2015年导购员工作总结
2015/04/25 职场文书
个人收入证明范本
2015/06/12 职场文书
开学第一周值周总结
2015/07/16 职场文书
Keras多线程机制与flask多线程冲突的解决方案
2021/05/28 Python
Python GUI编程之tkinter 关于 ttkbootstrap 的使用详解
2022/03/03 Python
使用python绘制横竖条形图
2022/04/21 Python
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python