小程序如何獲取多個formId實(shí)現(xiàn)詳解
更新時間：2019年09月20日 11:38:28 作者：jANE2160
這篇文章主要介紹了小程序如何獲取多個formId實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
很多人使用過form和button的多層嵌套來實(shí)現(xiàn)點(diǎn)擊一次獲取多個formId的目的，如下圖所示，點(diǎn)擊一次“提交”，可以獲取到多個formId
但是在今年3月份，這個投機(jī)取巧的方法（算是微信的一個bug）已經(jīng)被微信修復(fù)，那么再使用這個方法，所拿到的formId都是相同的了，也就不符合我們的需求了
接下來給大家介紹另一種方法：
將form和button封裝成組件模擬form submit，并把這個組件做成layout級，這樣可以把整個頁面包括在layout里面，利用事件自動冒泡的特性，只要點(diǎn)擊了頁面任一位置，就能獲取到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)文章
詳解JavaScript的懶加載是如何實(shí)現(xiàn)的
懶加載（Lazy Loading）是一種在軟件開發(fā)中常用的優(yōu)化技術(shù),它主要用于延遲加載資源,直到真正需要使用的時候才進(jìn)行加載,這樣可以減少初始加載的時間和資源消耗,并提升用戶體驗,本文給大家詳細(xì)介紹了JavaScript的懶加載是如何實(shí)現(xiàn)的,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了Bootstrap模態(tài)框案例解析,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
本文主要介紹了微信小程序骨架屏的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
在全局執(zhí)行環(huán)境中使用this，標(biāo)識Global對象，在瀏覽器中就是window對象。2010-03-03
巧用局部變量可以有效提升javascript性能，下面有個不錯的示例，大家可以參考下2014-02-02
淺談webpack構(gòu)建工具配置和常用插件總結(jié)
這篇文章主要介紹了淺談webpack構(gòu)建工具配置和常用插件總結(jié)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2020-05-05
下面小編就為大家?guī)硪黄猨s輸入框使用正則表達(dá)式校驗輸入內(nèi)容的實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
本文主要介紹了JavaScript函數(shù)的基礎(chǔ)知識。具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
Bootstrap 工具提示（Tooltip）插件 當(dāng)您想要描述一個鏈接的時候，工具提示（Tooltip）就顯得非常有用。這篇文章通過實(shí)例代碼給大家介紹bootstrap的工具提示功能，需要的朋友參考下吧2017-05-05