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

      },

解决小程序获取多个formId的方法

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


然后,骚操作来了。。。


  <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的方法

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


解决小程序获取多个formId的方法

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


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

我来说两句

0 条评论

推荐阅读

  • 响应式布局CSS媒体查询设备像素比介绍

    构建响应式网站布局最常见的是流体网格,灵活调整大小的站点布局技术,确保用户在使用的幕上获得完整的体验。响应式设计如何展示富媒体图像,可以通过以下几种方法。

    admin
  • 提升网站的性能快速加载的实用技巧

    网站速度很重要,快速加载的网站会带来更好的用户体验、更高的转化率、更多的参与度,而且在搜索引擎排名中也扮演重要角色,做SEO,网站硬件是起跑线,如果输在了起跑线,又怎么跟同行竞争。有许多方法可提升网站的性能,有一些技巧可以避免踩坑。

    admin
  • 织梦CMS TAG页找不到标签和实现彩色标签解决方法

    织梦cms是我们常见的网站程序系统的一款,在TAG标签中常常遇到的问题也很多。当我们点击 tags.php 页的某个标签的时候,有时会提示:“系统无此标签,可 能已经移除!” 但是我们检查程序后台,以及前台显示页面。这个标签确实存在,如果解决这个问题那?

    admin
  • HTML关于fieldset标签主要的作用

    在前端开发html页面中常用的标签很多,今天为大家带来的是关于HTML中fieldset标签主要的作用说明,根据技术分析HTML

    admin

精选专题