小程序如何獲取多個(gè)formId實(shí)現(xiàn)詳解
很多人使用過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í)有所幫助,也希望大家多多支持腳本之家。
- 詳解微信小程序開發(fā)之formId使用(模板消息)
- 基于Taro的微信小程序模板消息-獲取formId功能模塊封裝實(shí)踐
- 微信小程序判斷用戶是否需要再次授權(quán)獲取個(gè)人信息
- 微信小程序用戶授權(quán)、位置授權(quán)及獲取微信綁定手機(jī)號(hào)
- 解決微信小程序云開發(fā)中獲取數(shù)據(jù)庫的內(nèi)容為空的方法
- 詳解微信小程序獲取當(dāng)前時(shí)間及日期的方法
- 微信小程序獲取音頻時(shí)長與實(shí)時(shí)獲取播放進(jìn)度問題
- 微信小程序如何獲取用戶手機(jī)號(hào)
- 微信小程序?qū)崿F(xiàn)頁面跳轉(zhuǎn)傳值以及獲取值的方法分析
相關(guā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淺談webpack構(gòu)建工具配置和常用插件總結(jié)
這篇文章主要介紹了淺談webpack構(gòu)建工具配置和常用插件總結(jié),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2020-05-05antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例
這篇文章主要介紹了antd組件Upload實(shí)現(xiàn)自己上傳的實(shí)現(xiàn)示例,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12