欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2019年09月20日 11:38:28   作者:jANE2160  
這篇文章主要介紹了小程序如何獲取多個(gè)formId實(shí)現(xiàn)詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(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>

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

相關(guān)文章

  • 詳解JavaScript的懶加載是如何實(shí)現(xiàn)的

    詳解JavaScript的懶加載是如何實(shí)現(xiàn)的

    懶加載(Lazy Loading)是一種在軟件開發(fā)中常用的優(yōu)化技術(shù),它主要用于延遲加載資源,直到真正需要使用的時(shí)候才進(jìn)行加載,這樣可以減少初始加載的時(shí)間和資源消耗,并提升用戶體驗(yàn),本文給大家詳細(xì)介紹了JavaScript的懶加載是如何實(shí)現(xiàn)的,需要的朋友可以參考下
    2024-01-01
  • Bootstrap模態(tài)框案例解析

    Bootstrap模態(tài)框案例解析

    這篇文章主要介紹了Bootstrap模態(tài)框案例解析,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下
    2017-03-03
  • 微信小程序骨架屏的實(shí)現(xiàn)示例

    微信小程序骨架屏的實(shí)現(xiàn)示例

    本文主要介紹了微信小程序骨架屏的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-10-10
  • 小議Javascript中的this指針

    小議Javascript中的this指針

    在全局執(zhí)行環(huán)境中使用this,標(biāo)識(shí)Global對象,在瀏覽器中就是window對象。
    2010-03-03
  • 巧用局部變量提升javascript性能

    巧用局部變量提升javascript性能

    巧用局部變量可以有效提升javascript性能,下面有個(gè)不錯(cuò)的示例,大家可以參考下
    2014-02-02
  • 淺談webpack構(gòu)建工具配置和常用插件總結(jié)

    淺談webpack構(gòu)建工具配置和常用插件總結(jié)

    這篇文章主要介紹了淺談webpack構(gòu)建工具配置和常用插件總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2020-05-05
  • js 輸入框 正則表達(dá)式(菜鳥必看教程)

    js 輸入框 正則表達(dá)式(菜鳥必看教程)

    下面小編就為大家?guī)硪黄猨s輸入框使用正則表達(dá)式校驗(yàn)輸入內(nèi)容的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-02-02
  • antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例

    antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例

    這篇文章主要介紹了antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-12-12
  • JavaScript函數(shù)基礎(chǔ)詳解

    JavaScript函數(shù)基礎(chǔ)詳解

    本文主要介紹了JavaScript函數(shù)的基礎(chǔ)知識(shí)。具有很好的參考價(jià)值,下面跟著小編一起來看下吧
    2017-02-02
  • bootstrap的工具提示實(shí)例代碼

    bootstrap的工具提示實(shí)例代碼

    Bootstrap 工具提示(Tooltip)插件 當(dāng)您想要描述一個(gè)鏈接的時(shí)候,工具提示(Tooltip)就顯得非常有用。這篇文章通過實(shí)例代碼給大家介紹bootstrap的工具提示功能,需要的朋友參考下吧
    2017-05-05

最新評論