很多人使用过表单和按钮的多层嵌套来实现点击一次获取多个formId的目的,如下图所示,点击一次“提交”,可以获取到多个formId
但是在今年3月份,这个投机取巧的方法(算是微信的一个bug)已经被微信修复,那么再使用这个方法,所拿到的formId都是相同的了,也就不符合我们的需求了
接下来给大家介绍另一种方法:
将表单和按钮封装成组件模拟形式提交,并把这个组件做成布局级,这样可以把整个页面包括在布局里面,利用事件自动冒泡的特性,只要点击了页面任一位置,就能获取到formId
<强> 1。新建一个组件布局、wxml wxs, js、json代码分别如下
& lt;形式bindsubmit=" formSubmit " report-submit类=安季帧北?
& lt;按钮formType=疤峤弧眂lass=鞍磁ァ県over-class=懊挥小北?
& lt;视图类=肮潭ā痹? lt; slot> & lt;/slot> & lt;/view>
& lt;/button>
& lt;/form>
.layout {
显示:inline-block;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
字体大小:继承;
text-align:左;
文字修饰:没有;
行高:继承;
-webkit-tap-highlight-color:透明;
颜色:继承;
宽度:100%;
位置:相对;
}
.layout .button {
显示:inline-block;
padding-left: 0;
padding-right: 0;
box-sizing: border-box;
字体大小:继承;
text-align:左;
文字修饰:没有;
行高:继承;
-webkit-tap-highlight-color: # 000;
颜色:继承;
宽度:100%;
位置:相对;
}
.layout .button .fixed {
位置:相对;
z - index: 9999;
宽度:100%;
}
.layout .button:,。后布局.button: {
边框宽度:0;
}
组件({
方法:{
formSubmit:函数(e) {
让formId=e.detail.formId
console.log (formId)
}
}
})
{
“组件”:真的
}
<强> 2。在app.json中,将布局添加为全局组件
" usingComponents ": {
“布局”:“/组件/布局/指数”
}
<强> 3。在页面中使用
& lt; layout>
& lt;视图类=叭萜鳌北?
…
& lt;/view>
& lt;/layout>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
