浅析微信小程序modal弹窗关闭默认会执行cancel问题


Posted in Javascript onOctober 14, 2019

在我们使用小程序的modal组件时候,有的时候会碰到一个问题,那就是弹框的关闭,我们并没有选择取消或确定,而是点击弹框之外的部分,这个时候弹框会关闭,按理来说不会触发取消和确定的绑定事件,但是有的时候点击弹框之外的部分来关闭弹框会触发取消(cancel)绑定的事件,这是为什么呢?

如图是wxml页面

浅析微信小程序modal弹窗关闭默认会执行cancel问题

以下是页面对应的js内容

浅析微信小程序modal弹窗关闭默认会执行cancel问题

也就是说,就算我们不点击取消,点击弹框之外的部分,也会执行modelCancel方法。

后来发现,是header头的content-type在作怪,我们把header头里的content-type值改为application/json,再测试就没有问题了,关闭弹窗不再执行modelCancel。或者直接把header改为(去掉content-type,用默认的数据提交方式,也就是application/json)

var header = {
 'cookie': wx.getStorageSync("sessionid")
}

一个wx.request请求,必填项只有url,其他都是非必填。如图;

浅析微信小程序modal弹窗关闭默认会执行cancel问题

总结

以上所述是小编给大家介绍的浅析微信小程序modal弹窗关闭默认会执行cancel问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jQuery UI-Draggable 参数集合
Jan 10 Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 Javascript
JS和JQ的event对象区别分析
Nov 24 Javascript
script标签属性用type还是language
Jan 21 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
angularjs 源码解析之injector
Aug 22 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
JavaScript实现随机点名器实例详解
May 07 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
Sep 10 Javascript
在vue中把含有html标签转为html渲染页面的实例
Oct 28 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
vue实现百度语音合成的实例讲解
Oct 14 #Javascript
vue中进行微博分享的实例讲解
Oct 14 #Javascript
深入理解基于vue-cli的webpack打包优化实践及探索
Oct 14 #Javascript
Vue3.0 响应式系统源码逐行分析讲解
Oct 14 #Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 #Javascript
vue的路由映射问题及解决方案
Oct 14 #Javascript
浅谈Vue为什么不能检测数组变动
Oct 14 #Javascript
You might like
PHP使用ob_start生成html页面的方法
2014/11/07 PHP
Laravel 5框架学习之向视图传送数据
2015/04/08 PHP
php防止网站被攻击的应急代码
2015/10/21 PHP
Zend Framework教程之Autoloading用法详解
2016/03/08 PHP
PHP基于SMTP协议实现邮件发送实例代码
2017/04/27 PHP
使用Rancher在K8S上部署高性能PHP应用程序的教程
2020/07/10 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
jQuery 位置插件
2008/12/25 Javascript
isArray()函数(JavaScript中对象类型判断的几种方法)
2009/11/26 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
js制作简易年历完整实例
2015/01/28 Javascript
javascript格式化指定日期对象的方法
2015/04/21 Javascript
微信小程序 教程之小程序配置
2016/10/17 Javascript
react.js 翻页插件实例代码
2017/01/19 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
React-intl 实现多语言的示例代码
2017/11/03 Javascript
Vue中"This dependency was not found"问题的解决方法
2018/06/19 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
详解Vue中的Props与Data细微差别
2020/03/02 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
Python中新式类与经典类的区别详析
2019/07/10 Python
python elasticsearch环境搭建详解
2019/09/02 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
天巡全球:Skyscanner Global
2017/06/20 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
生产部经理岗位职责
2013/12/16 职场文书
销售简历自我评价
2014/01/24 职场文书
二年级学生评语大全
2014/04/23 职场文书
反邪教警示教育方案
2014/05/13 职场文书
委托书范本
2014/09/13 职场文书
Kubernetes部署实例并配置Deployment、网络映射、副本集
2022/04/01 Servers
Java中的Kotlin 内部类原理
2022/06/16 Java/Android