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