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

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

如图是wxml页面

以下是页面对应的js内容

也就是说，就算我们不点击取消，点击弹框之外的部分，也会执行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问题,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 微信小程序实现漂亮的弹窗效果

    最近项目里需要实现一个带着logo的美美哒弹窗,可是翻遍小程序的文档也只能见到wx.showModal这个丑丑的东西-- 场面一度十分尴尬 可是得做啊,要不然产品大姐又要暴走了-- 好吧,来研究一下模态对话框的性质自己DIY吧~ 实现思路 模态对话框之所以被叫做"模态",就是因为在它弹出的时候,用户如果不关闭这个对话框,是无法对其他窗口进行操作的. 那么这样一来,我们的思路就很明确了: 1. 构建一个蒙层(mask),使得背景变暗,并且阻止用户对对话框外界面的这里写代码片点击事件: 2

  • 微信小程序实现自定义modal弹窗封装的方法

    微信小程序实现自定义modal弹窗封装的方法

    前言 小程序官方提供了 wx.showModal 方法,但样式比较固定,不能满足多元化需求,自定义势在必行~ 老规矩先上图 点击某个按钮,弹出 modal框,里面的内容可以自定义,可以是简单的文字提示,也可以输入框等复杂布局.操作完点击取消或确定关闭 modal. 如何使用 将下面的 modal.wxml .modal.wxss .modal.js .modal.json 四个文件复制到对应位置即可. 封装完之后调用起来也很简单,看看调用的代码吧 <modal show="{{showMo

  • 微信小程序实战之自定义模态弹窗（8）

    微信小程序实战之自定义模态弹窗（8）

    首先看看官方提供的模态弹窗,供大家参考,具体内容如下 api如下: 示例: 这样的模态弹窗,充其量只能做个alert,提示一下信息. 但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法 wxml: <!--button--> <view class="btn" bindtap="powerDrawer" data-statu="open">button</view&

  • 微信小程序实现自定义picker选择器弹窗内容

    微信小程序实现自定义picker选择器弹窗内容

    微信小程序中定义好的几种picker选择器,不管是日期选择器还是地区选择器,或是其他的都有定死的样式和内容. 例如: 但是大多数开发程序的情况下还是需要自己写样式的,或是内容的. 例如: wxml <view class="free-btns" style="margin-top: 10vh;background:none;"> <button class="free-btn" bindtap="toggleDialo

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

    在我们使用小程序的modal组件时候,有的时候会碰到一个问题,那就是弹框的关闭,我们并没有选择取消或确定,而是点击弹框之外的部分,这个时候弹框会关闭,按理来说不会触发取消和确定的绑定事件,但是有的时候点击弹框之外的部分来关闭弹框会触发取消(cancel)绑定的事件,这是为什么呢? 如图是wxml页面 以下是页面对应的js内容 也就是说,就算我们不点击取消,点击弹框之外的部分,也会执行modelCancel方法. 后来发现,是header头的content-type在作怪,我们把header头里的

  • 微信小程序 modal详解及实例代码

    微信小程序 modal详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 modal 对话弹窗 属性名 类型 默认值 说明 title String   标题 hidden Boolean false 是否隐藏整个弹窗 no-cancel Boolean false 是否隐藏cancel按钮 confirm-text String 确定 confirm按钮文字 cancel-text String 取消 ca

  • 微信小程序vant弹窗组件的实现方式

    作为从事前端开发的你肯定见过不少的弹框组件,你可曾有想过要自己实现一个弹框组件库,又或者想完全定制化的使用各种标准UI框架中的弹框组件呢? 今天这篇文章将会带着你解析这一系列疑问,以vant-weapp组件库为例,从开发标准的弹窗组件使用到高度定制复合自我审美的弹窗,再到完全研究清楚vant-weapp框架弹窗组件部分源码. 一.vant-weapp弹窗组件介绍 vant-weapp组件库是有赞团队开发的 一款灵活简洁且美观的小程序UI组件库 ,此文将以这个组件库的用法为标准,下文提及的弹框组件

  • 微信小程序  modal详解及实例代码

    微信小程序  modal详解及实例代码

    微信小程序 开发文档,相关文章: 微信小程序  action-sheet 微信小程序 modal 微信小程序 toast 微信小程序 loading 微信小程序 modal 对话弹窗 属性名 类型 默认值 说明 title String   标题 hidden Boolean false 是否隐藏整个弹窗 no-cancel Boolean false 是否隐藏cancel按钮 confirm-text String 确定 confirm按钮文字 cancel-text String 取消 ca

  • 微信小程序 modal弹框组件详解

    微信小程序 modal弹框组件详解

    微信小程序  modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir

  • 微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

    本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,供大家参考,具体内容如下 先看效果是否是自己需要的 实现步骤: 1.整个布局用作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性 2.样式文件中设置Page的overflow-y属性值为hidden 3.样式文件中设置scroll-view的height属性值为100% 4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true J

  • 微信小程序自定义弹窗wcPop插件

    微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗 平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用. 解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法: 给遮罩层的最外层view中加入catchtouchmove="preventTouchMove" 即可解决该遮罩层点透问题. 根据需要还可以自定义多个按钮及事

  • 微信小程序  modal弹框组件详解

    微信小程序  modal弹框组件详解

    微信小程序  modal: 这里对微信小程序中 modal组件进行详细解析,我想开发微信小程序的小伙伴可以用到,这里小编就记录下modal的知识要点. modal modal类似于javascript中的confirm弹框,默认情况下是一个带有确认取消的弹框,不过点击取消后弹框不会自动隐藏,需要通过触发事件调用函数来控制hidden属性. 官方文档 .wxml <modal hidden="{{hidden}}" title="这里是title" confir

  • 微信小程序日历弹窗选择器代码实例

    微信小程序日历弹窗选择器代码实例

    应公司需求,写了一个弹窗日历选择器,感觉用着还不错,封装了一下,分享给大家,希望大家有什么意见可以指出来相互交流共同改进! 先上一个效果图:(当天日期为2018-4-18) 时间改为5月份的效果图: 直接上代码: wxml: <view class="weui-cells weui-cells_after-title" style='margin-top:100rpx;'> <view class="weui-cell weui-cell_access&qu

  • 微信小程序中button去除默认的边框实例代码

    微信小程序中button去除默认的边框的实现方法如下所示: button { position:relative; display:block; margin-left:auto; margin-right:auto; padding-left:14px; padding-right:14px; box-sizing:border-box; font-size:18px; text-align:center; text-decoration:none; line-height:2.5555555

随机推荐