微信小程序获取无限量formId的方法

发布时间:2019-06-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了微信小程序获取无限量formId的方法脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

1.微信小程序获取多个formId的方法(解决小程序点击一次,提交多个表单问题)
利用点击穿透的原理,直接上代码吧

wXMl代码:

<!-- 1 -->
<form bindsubmit="formSubmit" report-submit="{{true}}">
  <!-- 2 -->
  <button formType="submit" class='BTn'>
    <form bindsubmit="formSubmit" report-submit="{{true}}">
      <button formType="submit" class='btn'>
        <!-- 3 -->
        <form bindsubmit="formSubmit" report-submit="{{true}}">
          <button formType="submit" class='btn'>
            <!-- 4 -->
            <form bindsubmit="formSubmit" report-submit="{{true}}">
              <button formType="submit" class='btn'>
                <view class='u-publish-btn'  bindtap='test'>发布</view>
              </button>
            </form>
          </button>
        </form>
      </button>
    </form>
  </button>
</form>

wxss代码

form button{
  padding: 0;
}

form button::after{
  content: '';
  display: none;
}

.u-publish-btn{
  position: fixed;
  bottom: 50rpx;
  left: 50%;
  transform: translatex(-50%);
  width: 698rpx;
  line-height: 90rpx;
  border-radius: 4rpx;
  background: #1a1a1a;
  font-size: 38rpx;
  font-weight: bolder;
  color: #fff;
}

js代码:


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

显示页面:

微信小程序获取无限量formId的方法

点击按钮后最终结果:

微信小程序获取无限量formId的方法

脚本宝典总结

以上是脚本宝典为你收集整理的微信小程序获取无限量formId的方法全部内容,希望文章能够帮你解决微信小程序获取无限量formId的方法所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。