小程序-获取多个formId

破土称金 投稿

首先,为啥要获取多个formId,我就不解释了,大家都是明白人。

其次,第一次发简书,有什么潜规则啥的,没有遵守,不要介意,嘿嘿。

然后,这篇文章是我的原创。。。

重点,在这里,我讲一下遇到问题,和解决问题的过程。

需求:如题,其实是有业务需求的,这里不写太清楚,做到这一块的同学,自然懂

<form bindsubmit="formSubmit" report-submit="{{true}}">
      <button formType="submit" class='btn'>
            登录
      </button>
</form>

如同上面的几行代码,只要你点击登录按钮,就能提交一次表单,也能获取一次formId,但是想要实现点击一次提交多次,光靠复制这几行代码,貌似还不行,无论是缩小按钮,还是一些其他的奇葩方式,都不行。

这里要说的是一种点击穿透方式

<form bindsubmit="formSubmit" report-submit="{{true}}">
      <button formType="submit" class='btn'>
            <view class='aa'>
            </view>
      </button>
</form>

我在里面写了一个view (button里面) 给你们看一下样式(样式很重要)

.btn{
    width: 20rpx;
    height: 20rpx;
    margin: 0;
    padding: 0;
    border-radius: 0;
    position: fixed;
    background: rgba(0,155,0,0.5);
    top: 0;
}
button::after{
    border:none;
}
.aa{
    width: 200rpx;
    height: 200rpx;
    background: rgba(0,155,0,0.5);
    position:fixed;
    top: 0;
}

再看一下js,顺便说一下,模拟器上看不到实际的formId,用手机调试模式可以看到

formSubmit: function(e) {
    if (e.detail.formId != 'the formId is a mock one') {
        this.setData({
            formIdString: e.detail.formId + "," + this.data.formIdString
        })
    }
    console.log(this.data.formIdString)
}

看到的是这样,当你点击绿色的任何区域都能点击到按钮,然后提交表单

然后,骚操作来了。。。

<form bindsubmit="formSubmit" report-submit="{{true}}">
      <button formType="submit" class='btn'>
            <view class='aa'>
                 <form bindsubmit="formSubmit" report-submit="{{true}}">
                       <button formType="submit" class='btn'>
                            <view class='aa'>
                            </view>
                      </button>
                 </form>
            </view>
      </button>
</form>

我把整个的wxml代码复制一遍 放到view里面,看起来和之前差不多,其实是叠起来了

然而 实际操作的话,点击绿色部分,会提交两次,点击红色部分只会提交一次,这是为啥呢,先看图

现在应该明白了吧,个人感觉图已经解释一切,如果不懂,可以发评论。

要更多formId 那么就要更多的复制和粘贴,如果哪位老铁,写了个简化写法记得告诉我,我暂时还没有想到好的办法。

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2018-08-04

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。

5787
来自专栏WindCoder

2014-2015插件整理

主要作用:Protect your WordPress site by hiding vital areas of your site, protecting ...

772
来自专栏小白课代表

OneTab – 帮你节省 95% 的内存,让 Chrome / Firefox 重焕新生

浏览器作为我们上网的窗口,在我们的工作学习中担任着非常重要的角色,但人们想要浏览什么东西的时候,往往都是打开浏览器,打开网站,搜索关键词,尤其是你想要查某样东西...

3105
来自专栏deepcc

链接中 href='#' 和 href='###' 的区别以及优缺点

34612
来自专栏阿炬.NET

jQuery EasyUI 1.3.2 离线API、Demo

2855
来自专栏phodal

我的职业是前端工程师【五】: 前端工程师必会的六个调试技能

我还是一个野生程序员的时候,不会 Debug,只会傻傻地写一句句 std::count。即使是在今天,有些时候我也会这样做:打一个 console.log,然后...

22310
来自专栏XAI

微信最新自定义菜单事件

自定义菜单针对开发者增加调起扫一扫、发图片、发地理位置等能力         自定义菜单作为能够帮助公众号丰富界面,让用户更好更快地理解公众号的重要功能,现在针...

2538
来自专栏IMWeb前端团队

bigpipe性能优化

本文作者:IMWeb moonye 原文出处:IMWeb社区 未经同意,禁止转载 背景 当前网速越来越快,但是随着网页内容越来越丰富,其实我们打开网页...

26310
来自专栏腾讯移动品质中心TMQ的专栏

H5前端性能测试快速入门

前言 说到H5测试,对于做WEB测试的同学来说再熟悉不过了,它包括页H5功能测试,前端性能测试,浏览器兼容性能测试,以及服务端性能测试。那本文谈到...

2576
来自专栏ZKEASOFT

纸壳CMS 3.0升级.Net Core 2.1性能大提升

微软发布了.Net Core 2.1正式版,纸壳CMS也在第一时间做了升级,并做了一系列的优化和调整,性能大幅提升,并解决了一些历史遗留问题,添加了一些新功能。

2743

扫码关注云+社区

领取腾讯云代金券