知識 分享 互助 懶人建站

    懶人建站專注于網頁素材下載,提供網站模板、網頁設計、ps素材、圖片素材等,服務于【個人站長】【網頁設計師】和【web開發從業者】的代碼素材與設計素材網站。

    懶人建站提供網頁素材下載、網站模板
    知識 分享 互助!

    微信小程序獲取多個formId的方法(解決小程序點擊一次,提交多個表單問題)

    作者:不吃魚的貓 2018-06-17 人氣:
    微信小程序獲取多個formId的方法,解決小程序點擊一次,提交多個表單問題,只要你點擊登錄按鈕,就能提交一次表單,也能獲取一次formId,但是想要實現點擊一次提交多次,光靠復制這幾行代碼,貌似還不行,無論是縮小按鈕,還是一些其他的奇葩方式,都不行。

    微信小程序獲取多個formId的方法重點,講一下遇到問題,和解決問題的過程。

    需求:微信小程序點擊一次,提交多個表單,其實是有業務需求的,這里不寫太清楚,做到這一塊的同學,自然懂

      <form bindsubmit="formSubmit" report-submit="{{true}}">
          <button formType="submit" class='btn'>
                <view class='aa'>
                </view>
          </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的方法(解決小程序點擊一次,提交多個表單問題)

    現在應該明白了吧,個人感覺圖已經解釋一切,如果不懂,可以發評論。

    要更多formId 那么就要更多的復制和粘貼,如果哪位老鐵,寫了個簡化寫法記得告訴我,我暫時還沒有想到好的辦法。

    然后,這篇文章是我的原創。。。 下次還有新鮮的想法,還會和大家交流。


    作者:破土稱金
    鏈接:https://www.jianshu.com/p/84dd9cd6eaed


    ↓ 查看全文

    微信小程序獲取多個formId的方法(解決小程序點擊一次,提交多個表單問題)由懶人建站收集整理,您可以自由傳播,請主動帶上本文鏈接

    懶人建站就是免費分享,覺得有用就多來支持一下,沒有能幫到您,懶人也只能表示遺憾,希望有一天能幫到您。

    微信小程序獲取多個formId的方法(解決小程序點擊一次,提交多個表單問題)-最新評論

    福利彩票排列7走势图