小程序如何獲取多個formId實現(xiàn)詳解

發(fā)布時間：2020-09-03 08:04:34 來源：腳本之家閱讀：209 作者：jANE2160 欄目：web開發(fā)

很多人使用過form和button的多層嵌套來實現(xiàn)點擊一次獲取多個formId的目的，如下圖所示，點擊一次“提交”，可以獲取到多個formId

但是在今年3月份，這個投機取巧的方法（算是微信的一個bug）已經(jīng)被微信修復(fù)，那么再使用這個方法，所拿到的formId都是相同的了，也就不符合我們的需求了

接下來給大家介紹另一種方法：

將form和button封裝成組件模擬form submit，并把這個組件做成layout級，這樣可以把整個頁面包括在layout里面，利用事件自動冒泡的特性，只要點擊了頁面任一位置，就能獲取到formId

1. 新建一個組件layout，wxml、wxss、js、json代碼分別如下

<form bindsubmit="formSubmit" report-submit class="layout">
 <button formType="submit" class="button" hover-class="none">
  <view class="fixed"><slot></slot></view>
 </button>
</form>

.layout {
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  line-height: inherit;
  -webkit-tap-highlight-color: transparent;
  color: inherit;
  width: 100%;
  position: relative;
}
.layout .button{
  display: inline-block;
  padding-left: 0;
  padding-right: 0;
  box-sizing: border-box;
  font-size: inherit;
  text-align: left;
  text-decoration: none;
  line-height: inherit;
  -webkit-tap-highlight-color: #000;
  color: inherit;
  width: 100%;
  position: relative;
}
.layout .button .fixed{
  position:relative;
  z-index: 9999;
  width: 100%;
}
.layout .button:before,.layout .button:after{
  border-width: 0;
}

Component({
 methods: {
  formSubmit: function (e) {
   let formId = e.detail.formId
   console.log(formId)
  }
 }
})

{
 "component": true
}

2. 在app.json中，將layout添加為全局組件

"usingComponents": {
  "layout": "/components/layout/index"
 }

3. 在頁面中使用

<layout>
 <view class="container">
  ...
 </view>
</layout>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細節(jié)

小程序如何獲取多個formId實現(xiàn)詳解

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽