快捷導(dǎo)航

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

更新時(shí)間：2019年09月20日 11:38:28 作者：jANE2160

這篇文章主要介紹了小程序如何獲取多個(gè)formId實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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

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

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

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

1. 新建一個(gè)組件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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Layer UI表格列日期格式化及取消自動(dòng)填充日期的實(shí)現(xiàn)方法
這篇文章主要介紹了Layer UI表格列日期格式化及取消自動(dòng)填充日期的實(shí)現(xiàn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-05-05
JS正則驗(yàn)證郵箱的格式詳細(xì)介紹
這篇文章主要介紹了JS正則驗(yàn)證郵箱的格式。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
跟我學(xué)Nodejs（三）--- Node.js模塊
這是本系列的第三篇文章了，前面2篇網(wǎng)友們反饋回來不少的消息，加上最近2天比較忙，一直沒來得及整理，周末了，趕緊給大家整理下發(fā)出來，本文講的是node.js模塊
2014-05-05
一個(gè)js實(shí)現(xiàn)的所謂的滑動(dòng)門
一個(gè)js實(shí)現(xiàn)的所謂的滑動(dòng)門...
2007-05-05
JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘，特別實(shí)用的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
微信小程序?qū)崿F(xiàn)2048小游戲的詳細(xì)過程
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)2048小游戲的相關(guān)資料,文中將實(shí)現(xiàn)的代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2021-09-09
微信小程序子組件向父組件傳值的兩種方法
本文介紹了微信小程序中子組件向父組件傳值的兩種方法,這兩種方法都能有效地實(shí)現(xiàn)子組件向父組件的數(shù)據(jù)傳遞,對(duì)于開發(fā)微信小程序的開發(fā)者來說,掌握這些技巧非常重要,感興趣的朋友跟隨小編一起看看吧
2024-09-09
用js編寫留言板
這篇文章主要為大家詳細(xì)介紹了用js編寫留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
一文秒懂JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象以及原型鏈
這篇文章主要介紹了一文秒懂JavaScript構(gòu)造函數(shù)、實(shí)例、原型對(duì)象以及原型鏈的相關(guān)知識(shí)，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-08-08
Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能(附源碼下載)
dropzone.js是重量輕的JavaScript庫，將HTML元素設(shè)置為一個(gè)降落區(qū),并通過Ajax文件被上傳到服務(wù)器。本文給大家詳細(xì)介紹Dropzone.js實(shí)現(xiàn)文件拖拽上傳功能，需要的朋友參考下吧
2016-11-11