专栏首页前端黑板报小程序-获取多个formId

小程序-获取多个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)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 使用引流公众号组件,你需要知道这些

    小程序又开放一项新能力,就是可以在小程序里面引导关注公众号,那以前是怎么做公众号导流的呢?由于小程序里面无法直接识别二维码,只能提示用户保存公众号二维码,然后微...

    前端黑板报
  • 构建离线web应用(二)

    本文由哔哩哔哩前端工程师 墨白 翻译分享 上一篇文章中,我们成功尝试使用 service workers。我们也可以在应用中缓存一些资源。这篇文章我们准备了解这...

    前端黑板报
  • 软件工程师需要了解的网络知识:从铜线到HTTP(三)—— TCP/IP

    JohnLui:程序员,Swift Contributor,正在写《iOS 可视化编程与 Auto Layout》 那些首部 ? 一个 HTTP 请求发送到服...

    前端黑板报
  • 多比:让区块链告别非理性繁荣

    这条ICO“套路”一本万利,据称曾帮一些基金获得高达80倍的赢利。“ICO”是币圈里对募集资金的特指,通过发行虚拟货币而获得投资。“疯狂时,ICO一周内就可完成...

    dobitrade
  • 这是第一个冲进戛纳的小程序

    知晓君
  • Ant Design Vue引入Form组件样式不显示的解决方法

    使用 vue-cli 安装 Ant Design Vue 的 Form 组件,发现不能用,组件样式不显示。

    德顺
  • 0769-7.0.3-如何在Kerberos环境下用Ranger完成对Hive的行过滤及列脱敏

    本篇文章主要介绍如何在CDP DC7.0.3集群中使用Ranger在Hive中进行行过滤及列脱敏,行级别的过滤相当于一个强制性的where子句,例如在订单表中,...

    Fayson
  • 【leetcode】Binary Tree Level Order Traversal II

    Given a binary tree, return the bottom-up level order traversal of its nodes' va...

    阳光岛主
  • NIPS 2018 | Quoc Le提出卷积网络专属正则化方法DropBlock

    深度神经网络在具备大量参数、使用大量正则化和噪声时效果很好,如权重衰减和 dropout [1]。尽管 dropout 的首次成功与卷积网络相关,但近期的卷积架...

    机器之心
  • 两个字符串是变位词

    一份执着✘

扫码关注云+社区

领取腾讯云代金券