解决小程序获取多个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
  • 微信小程序对于线下实体店具有哪些红利

    对于一些商业敏感的电子商务公司,如蘑菇街,京东等等,在看到小程序背后巨大的流量红利后,逐渐将产品从原来的公众号或应用程序转移到小程序,并在小程序的帮助下,获得更多利润。

    admin
  • 网站开发中HTTP状态码分类说明

    请求Web服务器会返回HTTP状态码,通知浏览器请求是否成功,是否有错误或需要身份验证。HTTP状态代码是服务器传输响应的重要部分,服务器会自动包含在每个HTTP响应中,如果服务器无法执行客户端请求或无法传输网站信息,会显示对应的状态码。

    admin
  • 非关系型和关系数据库管理系统有哪些

    根据数据的类型,结构,数据模型,数据存储使用,不同的系统需求,所需的架构或查询机制,用于本地存储的动态配置数据的系统,与操作关系数据库完全不同的要求,但是根据分类有非关系型和关系数据库管理系统。

    admin

精选专题