uni.showModal内部方法调用失败问题

最新推荐文章于 2024-04-19 00:00:00 发布
最新推荐文章于 2024-04-19 00:00:00 发布
阅读量810 收藏 1
点赞数 6
文章标签： uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47094365/article/details/134708416
版权

uni.showModal是一个异步的函数，异步进行一次弹窗操作，这就使得函数域this指向的window或者其他域，由此是读不到data里数据

解决方法：

（一）改成箭头函数

（二）在外面定义一个that，将this 赋值 给 一个变量/常量

（三）在success后面加上.bind(this)

是小圆子呀
关注
  • 6
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【uniapp-uni.showModal不生效】
weixin_47416539的博客
12-28 941
点击确定的时候，里面的变量或者执行的动作没有生效，只需在。
uni.showModal用法
热门推荐
zl871318846的博客
08-07 5万+
uni.showModal({ title: '提示', content: '确定删除？', cancelText: "取消", // 取消按钮的文字 confirmText: "确认", // 确认按钮的文字 showCancel: true, // 是否显示取消按钮，默认为 true confirmColor: '#f55850', cancelColor: '#39B54A', success: (res) => { if(res.confirm) { cons
uni-app 如何在函数中调用 Modal 模态框
最新发布
BradenHan的专栏
04-19 1131
TOC/TOC/TOCuni-app 提供了内置的 API用于直接弹出系统样式的模态框。在上述代码中，函数调用了当用户点击确定或取消按钮时，success回调函数会被触发，可以根据和res.cancel的值判断用户的选择并执行相应操作。更多详细内容，请前端爱好者。如果你的项目中已经集成并使用了 uView UI 库，那么可以利用其提供的 Modal 组件来实现自定义样式的模态框。
uni-app 之 API 入门教程 uniapp在线教程 uni app视频教程
04-28
主要讲解uni-app中常用的API的使用技巧、定时器、跳转、界面、网络数据的获取和传递、缓存、图片选择、拍照、上传等，这些都是我们在实战中都要用到的基础。
uni-app点击按钮弹出提示框-uni.showModal(OBJECT),选择确定和取消
前端视听
07-05 3万+
参考文档： https://uniapp.dcloud.io/api/ui/prompt?id=showmodal 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。 uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) { conso
uniapp之uni.showModal
qq_60272948的博客
04-15 4056
所以你可以用uni.showModal进行一个判断，假如你想删除物品，又想用户二次确认后删除，就可以用uni.showModal,如果点击了确定，调用接口删除数据并重新渲染数据。是 Uni-app 框架中的一个API，主要用于在应用中弹出一个模态对话框。当你点击了确定，confirm为true，cancel为false,当你点击了取消，confirm为false，cancel为true。title标题，content内容，success接口调用成功的回调函数，success里接受的数据有这些。
uniapp中自定义showModal样式
在无知中学习，在学习中成长，在成长中学习
07-23 1万+
uniapp中自定义showModal样式页面中使用在main.js中引入show-modal组件创建组件show-modal组件名称show-modal.vue创建initModal.js 页面中使用 <show-modal></show-modal> this.$showModal({ title: '', content: '当', cancelText:"取消", confirmText:"生成赛果", success(res) {
浅析微信小程序modal弹窗关闭默认会执行cancel问题
10-16
解决这个问题的方法有以下两种： 1. 将header头中的`content-type`值改为默认的`application/json`。这样，当发起网络请求时，微信小程序可以正确解析返回的数据，避免对modal组件的事件处理造成影响。例如，修改后...
微信小程序实现自定义modal弹窗封装的方法
01-03
小程序官方提供了 wx.showModal 方法，但样式比较固定，不能满足多元化需求，自定义势在必行~ 老规矩先上图 点击某个按钮，弹出 modal框，里面的内容可以自定义，可以是简单的文字提示，也可以输入框等复杂布局。...
ShowModal.rar
06-29
在IT行业中，尤其是在开发移动端应用或者网页应用时，"ShowModal.rar"的描述涉及到了一个常见功能：模态对话框（Modal Dialog）。模态对话框是一种设计模式，它强制用户在进行其他操作之前先对当前显示的信息作出...
小程序按钮避免多次调用接口和点击方案实现(不用showLoading)
11-20
本来是用showLoading的，点击直接转菊花...写在公共的utils方法里面 // 防止多次点击 function btnClickedFun(self) { self.setData({ btnClicked: true }) setTimeout(() => { self.setData({ btnClicked: fals
微信小程序自定义模态弹窗插件
03-29
最近在写微信小程序的时候用到了模态...使用方法也很简单，在要调用弹窗的位置使用this.showModel()方法，传入一些参数，就可以将弹窗显示出来。   this.showModel({ ModelId: 1, ModelTitle: '标题(2)', ModelCont
uni.showModal的用法
guang.yan的博客
10-25 2829
【代码】uni.showModal的用法。
【uni-app】重写uni.showModal方法，将取消和确定按钮互换位置
可耐特
08-25 3711
在main.js中写入。
uniapp 的提示框uni.showToast与确认框uni.showModal
前端小陈的成长记录
08-07 3122
uniapp 提示框与确认框
uni.showModal的content内容换行 ，动态显示内容换行,动态参数，动态换行
吃不搭的博客
08-07 1万+
在uniapp中 uni.showModal({ title: '更新提示', content: content, success: function (resp) { if (resp.confirm) { } } }) 当写成如上格式的时候，showModal内容中是不会换行的， 这种写法是可以换行的，但是很多时候内容我们都是动态显示的 uni.showModal({ title: '更新提示', content: "1.实名认证\n2.自动检测更新\n3.细节优化", .
uni.showModal使用
qq_37570945的博客
11-17 2989
uni.showModal({ title: '提示', content: '确定删除该地址吗？', cancelText: "取消", // 取消按钮的文字 confirmText: "确认", // 确认按钮文字 showCancel: true, // 是否显示取消按钮，默认为 true confirmColor: '#999999', cancelColor: '#39B54A', success: (res).
uni.showModal 里的this指向
weixin_45723025的博客
07-25 1539
只需要在success后面加上bind(this)就可以了，然后在函数开头进行一次varthat=this，再通过that调用data里的数据就可以。uni.showModal是一个异步的函数，异步进行一次弹窗操作，这就使得函数域this指向的window或者其他域，由此是读不到data里数据。console.log(‘用户点击确定’);console.log(‘用户点击取消’);content‘这是一个模态弹窗’,title‘提示’,...
uniapp showModal与bind(this)
dazeka的博客
03-02 2155
最近写uniapp微信小程序，遇到一个和bind(this)比较相似的问题 需求是需要在用户进入页面后，会进行一个弹窗，如果用户选择“重新填写”，会再次弹一个窗让用户确认，我们可以调用uniapp的一个api——uni.showModal进行两次嵌套完成这个需求（下面为第一次的源码） showModal() { uni.showModal({ title: '提示', content: `您之前填写进度为${this.finishRate}%，是否继续填写？`,
uni.showModal 无法调用方法
08-24
当使用uni.showModal方法时，有一种情况是无法调用方法的。这是因为uni.showModal是一个异步函数，它会在执行弹窗操作后立即返回，而不会等待用户的确认或取消操作。因此，在success回调函数中无法直接调用其他方法或访问data中的数据。为了解决这个问题，可以使用bind(this)来绑定this的作用域，或者在函数开头通过var that=this来保存this的引用，然后通过that来调用data中的数据。这样就可以在success回调函数中访问和操作data中的数据了。例如可以按照以下方式使用uni.showModal方法： uni.showModal({ title: '提示', content: '这是一个模态弹窗', success: function (res) { if (res.confirm) { console.log('用户点击确定'); // 可以在这里调用其他方法或操作data中的数据 } else if (res.cancel) { console.log('用户点击取消'); // 可以在这里调用其他方法或操作data中的数据 } }.bind(this) }); 另外，小程序官方也提供了wx.showModal方法，但它的样式比较固定，无法满足多元化的需求。因此，自定义弹窗是一个常见的解决方案。可以通过点击某个按钮来弹出一个自定义的modal框，里面的内容可以根据需要进行自定义，可以是简单的文字提示，也可以包括输入框等复杂的布局。这样就可以更好地满足多样化的需求了。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [uni.showModal 里的this指向](https://blog.csdn.net/weixin_45723025/article/details/125971765)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [微信小程序实现自定义modal弹窗封装的方法](https://download.csdn.net/download/weixin_38538585/14014512)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值