微信小程序獲取無限量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代碼:xss

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)
  }

顯示頁面:this

圖片描述

點擊按鈕後最終結果:spa

圖片描述

相關文章
相關標籤/搜索