脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 小程序获取多个formId

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

 更新时间：2019年09月20日 11:38:28   作者：jANE2160  
这篇文章主要介绍了小程序如何获取多个formId实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

很多人使用过form和button的多层嵌套来实现点击一次获取多个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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • Layer UI表格列日期格式化及取消自动填充日期的实现方法

    Layer UI表格列日期格式化及取消自动填充日期的实现方法

    这篇文章主要介绍了Layer UI表格列日期格式化及取消自动填充日期的实现方法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-05-05
  • JS正则验证邮箱的格式详细介绍

    JS正则验证邮箱的格式详细介绍

    这篇文章主要介绍了JS正则验证邮箱的格式。需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • 跟我学Nodejs（三）--- Node.js模块

    跟我学Nodejs（三）--- Node.js模块

    这是本系列的第三篇文章了，前面2篇网友们反馈回来不少的消息，加上最近2天比较忙，一直没来得及整理，周末了，赶紧给大家整理下发出来，本文讲的是node.js模块
    2014-05-05
  • 一个js实现的所谓的滑动门

    一个js实现的所谓的滑动门

    一个js实现的所谓的滑动门...
    2007-05-05
  • JavaScript实现抖音罗盘时钟

    JavaScript实现抖音罗盘时钟

    这篇文章主要为大家详细介绍了JavaScript实现抖音罗盘时钟，特别实用的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2019-10-10
  • 微信小程序实现2048小游戏的详细过程

    微信小程序实现2048小游戏的详细过程

    这篇文章主要给大家介绍了关于微信小程序实现2048小游戏的相关资料,文中将实现的代码介绍的非常详细,对大家学习或者使用微信小程序具有一定的参考学习价值,需要的朋友可以参考下
    2021-09-09
  • 微信小程序子组件向父组件传值的两种方法

    微信小程序子组件向父组件传值的两种方法

    本文介绍了微信小程序中子组件向父组件传值的两种方法,这两种方法都能有效地实现子组件向父组件的数据传递,对于开发微信小程序的开发者来说,掌握这些技巧非常重要,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • 用js编写留言板

    用js编写留言板

    这篇文章主要为大家详细介绍了用js编写留言板，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 一文秒懂JavaScript构造函数、实例、原型对象以及原型链

    一文秒懂JavaScript构造函数、实例、原型对象以及原型链

    这篇文章主要介绍了一文秒懂JavaScript构造函数、实例、原型对象以及原型链的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • Dropzone.js实现文件拖拽上传功能(附源码下载)

    Dropzone.js实现文件拖拽上传功能(附源码下载)

    dropzone.js是重量轻的JavaScript库，将HTML元素设置为一个降落区,并通过Ajax文件被上传到服务器。本文给大家详细介绍Dropzone.js实现文件拖拽上传功能，需要的朋友参考下吧
    2016-11-11

最新评论