小程序弹窗

这篇具有很好参考价值的文章主要介绍了小程序弹窗。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序弹窗的例子如下:

  1. 确认弹窗:
wx.showModal({
  title: '提示',
  content: '确定要删除该记录吗?',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定')
      // 执行删除操作
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})
  1. 提示弹窗:
wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})
  1. 加载中弹窗:
wx.showLoading({
  title: '加载中',
  mask: true
})

// 隐藏加载弹窗
setTimeout(function () {
  wx.hideLoading()
}, 2000)
  1. 自定义弹窗:
wx.showModal({
  title: '自定义弹窗',
  content: '这是一个自定义的弹窗示例',
  showCancel: false, // 不显示取消按钮
  confirmText: '知道了',
  confirmColor: '#3CC51F',
  success: function (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    }
  }
})

这些例子演示了不同类型的小程序弹窗,包括确认弹窗、提示弹窗、加载中弹窗和自定义弹窗。开发者可以根据自己的需求选择合适的弹窗类型,并根据具体情况自定义弹窗的内容和样式。文章来源地址https://www.toymoban.com/news/detail-822980.html

到了这里,关于小程序弹窗的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【小程序】微信小程序中实现【关注公众号】弹窗

    1、效果,注意,在开发工具中并不显示公众号信息,只有在体验版和正式版中才能看到!

    2024年02月15日
    浏览(60)
  • 微信小程序 四种弹窗方式

    显示消息提示框 示例 : 显示模态对话框 示例 : 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 示例: 注意: wx.showLoading 和 wx.showToast 同时只能显示一个 wx.showLoading 应与 wx.hideLoading 配对使用 显示操作菜单 示例: 具体参数可见官网:微信小程序弹窗

    2023年04月08日
    浏览(50)
  • 关于微信小程序--授权弹窗

    1.进入微信文档官网,找到button组件 添加链接描述 2.阅读文档,发现只需设置一个opentype类型和bindgetuserinfo 3.在js页面编写GetuserinfoHide函数的实现 4.以上操作完成后,在模拟器上进行调试,怎么也出不来效果,log可以打印出res,但是获取用户信息失败。通过百度,查看官网。最

    2024年02月11日
    浏览(50)
  • 微信小程序的弹窗提示

     第一种:弹出提示框,用户可以选择确定或者取消,且都带有回调。  第二种直接弹出成功的 用户无法选择确定与取消   第三种:等待中...   第四种:无任何图标仅仅只是展示    第五种:弹窗提示选项

    2024年02月11日
    浏览(72)
  • 微信小程序自定义弹窗阻止滑动冒泡catchtouchmove之后弹窗内部内容无法滑动

    如图所示: 自定义弹窗内部有带滚动条的盒子区域 在盒子上滑动,页面如果超出一屏的话,也会跟着一起上下滚动 解决方案:给自定义弹窗 添加 catchtouchmove 事件,阻止冒泡即可 网上不少人说什么 catchtouchmove=\\\"true\\\" 这样,可以没问题,其实 catchtouchmove=\\\"任何内容\\\" 都行,只要

    2024年02月06日
    浏览(45)
  • 微信小程序|自定义弹窗组件

    2024年02月12日
    浏览(43)
  • 微信小程序 webview页面分享弹窗

    公司业务需要在webview中添加分享弹窗,可以发送给朋友及生成海报分享,因为好几个详情都需要这个功能,因此抽离了share-sheet的组件,ui效果如下图: 点击分享,显示以下弹窗 share-sheet.wxml如下: share-sheet.js如下: share-sheet.less如下: 一下均为真机测试,实际情况可能会随

    2024年02月11日
    浏览(55)
  • 微信小程序&H5设置全局弹窗

    1、头部公告: 2、弹窗类型公告: npm i vue-inset-loader (在项目根目录下创建) 我这里的组件文件名就给他设置为 global-notice

    2024年04月27日
    浏览(34)
  • 微信小程序:点击按钮出现右侧弹窗

    wxml wxss js

    2024年02月06日
    浏览(44)
  • 【微信小程序】wx.requestSubscribeMessage无法唤起小程序订阅弹窗

    报错信息: requestSubscribeMessage:fail can only be invoked by user TAP gesture. 报错原因:在某个场景的方法里面调用而不是直接通过用户点击 解决方法:一般可做成显示一个弹框友好的提示用户,然后再让用户点击按钮去手动触发订阅

    2024年02月12日
    浏览(66)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包