关于 vant weapp 中按钮 submit 不生效问题

最新推荐文章于 2023-07-12 17:33:55 发布
最新推荐文章于 2023-07-12 17:33:55 发布
阅读量2k 收藏 2
点赞数 2
分类专栏： 小程序 文章标签： 小程序 vant vant weapp van-button submit
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lb1135909273/article/details/108712501
版权

先放上“罪魁祸首”：

在这里插入图片描述

可以看得到 vant weapp 的官网明确说明 van-button 有 form-type 的属性

在这里插入图片描述

尝试了很多遍，原生和 van-button 的用法，始终都是原生生效，van-button 不生效，这里特指form-type不生效。

解决方法就是：使用原生

在这里插入图片描述

这是微信小程序官网对这个属性的解释！

PS：写进文档，老让人觉得是自己的使用方法有问题，最后结果就是这玩意根本实现不了！

李小斌96
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
vant表单点击提交没有触发验证_点击提交按钮后submit事件没有被触发
weixin_39786141的博客
12-22 2679
var forms = document.querySelectorAll("form")for (var i = 0; i < forms.length; i++) {forms[i].addEventListener("submit", function (e) {console.log(this);if (!this.checkValidity()) {e.preventDefault...
vantweapp源代码
01-25
源代码是软件开发的基础，对于Vant WeApp源代码的深入理解有助于开发者更好地定制化组件，优化性能，以及解决在实际项目中遇到的问题。以下是对Vant WeApp源代码中几个关键知识点的详细说明： 1. **组件化开发**：...
关于Vant表单点击提交无反应的问题
qq_29496169的博客
12-21 2772
关于Vant表单点击提交无反应的问题
小程序 vant button 组件不触发 form submit 问题及解决
weixin_42369612的博客
03-09 926
小程序通知需要使用 formId 参数,使用 vant 的button 关联 submit 无法触发事件。
解决使用Vant组件库表单组件无法提交数据的问题
weixin_51828648的博客
05-25 755
的判断，但是v-show是相当于控制css属性进行的渲染，即使隐藏掉了但是组件没有销毁，还是存在的只是看不见了，所以在设置了必填的表单验证的情况下，是无法通过的，所以没有办法提交表单，点击复选框，选择毕业时间这一栏将被隐藏掉，但是点击保存，总是无法提交表单。要解决这个问题，使用v-if进行条件渲染即可。原本使用了v-show进行条件渲染。
ajax提交form表单数据_[修复]按下回车表单被错误提交
weixin_39526185的博客
11-27 158
1、问题在文章列表页按下回车，会跳转到错误页面，如下：这是一个意料外的状况，感谢 @SummerEnds 发现问题。2、解决1）原来的设计只考虑了“开始搜索”的点击——当点击这个按钮时，会触发一段js 函数 start_search()，去收集页面表单上的数据，然后一起以ajax的方式post。而没有想到回车，竟然也会触发表单自动提交。原因是跟前端form有关：form表单中，如果当前表单只有一...
Mpvue中使用Vant Weapp组件库的方法步骤
10-16
【描述】：本篇文章将详细介绍如何在基于Mpvue的项目中利用Vant Weapp组件库，提供了一个实用的指南，帮助开发者避免常见问题，提高开发效率。 【标签】：Mpvue使用Vant Weapp，Mpvue使用Vant Weapp组件库 【正文...
Taro引入vant Weapp的方法
01-08
Taro(V2.0.5)中引入Vant Weapp，（需下载资源到项目中：大小约322KB） 需如下几步： 1.在/src/components下新建文件夹vant-weapp 2.在github上找到Vant-weapp下载文件包，将对应的dist文件夹下内容复制到新建的vant-...
修改后的能够在uniapp项目中使用的 Vantweapp
07-24
解压当前压缩包，直接放在uniapp项目wxcomponents目录 引用即可 修改后的Vantweapp在uniapp项目里使用不会报错 修改里面的px单位为微信小程序里的rpx 已在发布的微信小程序里使用
vantweapp的使用
01-20
npm i vant-weapp -S –production 回车进行npm的安装。 3、此时还没有安装完成，选中小程序点击开发工具中的“工具”选项——>点击构建npm。 4、此时查看项目，出现package.json（这是配置文件）文件以及其它一些...
记录vant weapp 小程序组件库遇到的坑以及ios和安卓兼容问题 SubmitBar
Taurus_666
07-30 7075
组件一：SubmitBar 提交订单栏IOS不显示，安卓正常 前情提要（可忽略） 因为项目比较着急，正好这个组件跟设计图类似，欣喜万分，拿来即用。然鹅，现实跟想象中真是完全不同。 IOS上完全不展示这个组件，安卓正常。苦恼万分，想着只是css问题（想着vant不可能有这种不显示的bug），浪费半天时间，无果。第二天头脑清醒的把组件拿到别的页面尝试，竟然能展示。 问题及解决 最终，判定是因为SubmitBar 放在了tab标签里面。如果放在tab里面IOS就会有问题，放在外层就正常。 组件二: flex布
vant-form使用过程中遇到的小问题
weixin_44907437的博客
06-21 2694
关于vant的使用 vant-form 场景：用户登录，点击获取验证码触发了form校验
小程序使用 组件库 vant-weapp详细教程
祈澈菇凉
10-16 3318
要说到小程序开发过程中用到的UI组件库，我第一个想到的就是vant，因为对于我来说，这个组件库里面的UI界面比较符合我的审美，颜值还不错，另外最重要的是，里面的功能比较齐全，项目之中要用到的一些需求，在这里都可以找到并且直接使用，就很nice了。 小程序使用轻量、可靠的小程序 UI 组件库 vant-weapp Github源码：https://github.com/youzan/vant-wea...
vant-weapp表单数据双向绑定
一点博客
04-29 7792
<van-field :value="loginForm.username" placeholder="请输入用户名" required label="用户名" @input="loginForm.username=$event.mp.detail"/>
微信小程序之使用Vant Weapp做一个弹窗填写文本
专注前端技术，包括Web端、移动端、小程序、APP
04-28 4945
在小程序中，我们经常使用到输入文本框这个组件。比如要填写个人信息，填信息就要去跳转到一个填信息的页面，这样操作起来会有点浪费空间和时间。比如我只需要改一个自己的名字或者一点别的信息就要跳转到另外一个页面，实在是有点小题大做。 于是就想用弹窗的方式，填写信息，进行提交。 在网上找了类似的资料，都不太满意，总觉得太麻烦了，还是自己做吧。 于是想到了Vant ，这个UI框架很好用，简单安装，直接拿来它们...
mpVue 微信小程序基于vant-weapp 组件的二次封装TForm 表单组件（修改源码插槽使用）
最新发布
wocwin的博客
07-12 1905
mpVue 微信小程序基于vant-weapp 组件的二次封装TForm 表单组件（适配移动端）新增仓库地址
【小程序】vant weapp表单组件value非响应&表单校验
qq_42193934的博客
06-01 4877
解决办法： 给van-field添加：bind：input、bind：change、bind：blur解决，前两者都是实时监听，最后一个只在失去焦点时触发，考虑到性能问题，使用bind：blur，通过e.detail.value获取到value值，再进行校验，不符合就toast，对于用户不输入的情况，可在最后submit的时候进行判空处理。 ...
微信小程序搭配vantweapp使用表单中Field输入框替换原始input输入框，reset重置按钮失效或失败
qq_44776950的博客
08-01 4001
微信小程序文档中form表单原来有重置事件 button按钮的reset只对表单中的input有效，于是点击重置按钮重置失败，所以将表单绑定bindreset事件来重置表单 解决方案： wxml代码： <form bindsubmit="addbtnSub" bindreset="delbtnre"> <!-- <input name="barcode" placeholder="请输入条形码" value="6913825649859"></input>
微信小程序开发实战（二）UI组件介绍 Vant Weapp
有勇气的牛排博客
03-28 481
微信官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/ 1 第三方组件库 Vant Weapp 官网：https://youzan.github.io/vant-weapp/#/intro 1.1 npm构建 从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 此文档要求开发者们对 npm 有一定的了解，因此不会再去介
vant输入框右边插入图标
06-02
在 Vant 中，可以通过 `right-icon` 属性在输入框右侧插入图标。代码示例： ```html <van-cell-group> <van-field label="用户名" placeholder="请输入用户名" v-model="username"> <template #right-icon> <van-icon name="user-o" /> </template> </van-field> </van-cell-group> ``` 在上面的代码中，我们使用了 `van-field` 组件来创建一个带有标签和输入框的单元格，同时使用 `right-icon` 插槽来插入一个图标。在这个例子中，我们使用了 `van-icon` 组件来渲染一个用户图标。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值