微信小程序几种常用弹窗提示方法

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

1.提示文字

可以设置显示时间(仅提示时使用)duration设置时间

不显示icon,此时 title文字最多可显示两行

也可以显示icon,显示icon文字最多显示 7 个汉字长度

icon常用的有:success、error、loading

wx.showToast({
  title: '成功',
  icon: 'success',
  duration: 2000
})

示例图片

微信小程序几种常用弹窗提示方法

2.模态对话框

 可以确认和关闭

wx.showModal({
	title: '提示',
    content: '确定要取消订单吗?',
	success (res) {
		if (res.confirm) {
			//这里是点击确认执行事件
		} else if (res.cancel) {
	        //这里是点击取消执行事件
		}
	 }
})

如图

微信小程序几种常用弹窗提示方法

 

3.loading 提示框

显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框 

注意:wx.showLoading 和 wx.showToast 同时只能显示一个

wx.showLoading({
  title: '加载中',
})

setTimeout(function () {
  wx.hideLoading()
}, 2000)

如图:

微信小程序几种常用弹窗提示方法

4.行选择弹窗

itemList数组所对应的选项 

wx.showActionSheet({
	itemList:['A', 'B', 'C'], 
	success: (res) => {
	switch(res.tapIndex) {
		case 0:
			console.log('a')
			break;
		case 1:
			console.log('b')
			break;	
		case 2:
			console.log('c')
			break;
		}
	},
	fail (res) {
		console.log('取消')
	}
})

如图

微信小程序几种常用弹窗提示方法 

 

微信小程序文档地址:wx.showToast(Object object) | 微信开放文档文章来源地址https://www.toymoban.com/news/detail-506861.html

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

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

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

相关文章

  • 微信小程序返回上级页面传参的几种方法

    在做微信小程序跳转页面,经常会遇到二级页面要返回上级页面,并且需要携带参数,wx.navigateTo()跳转大家都知道直接在url上面拼接参数,之后再二级页面onLoad(options)里获取,但是返回页面wx.navigateBack()不可以那样做,所以就可以用以下几种方式来做,具体看个人业务适合用

    2024年02月08日
    浏览(51)
  • 在微信小程序部署AI模型的几种方法

    本文只是分享思路,不提供可完整运行的项目代码 以目标检测类模型为例,该类模型会输出 类别信息 , 置信度 , 包含检测框的4个坐标信息 但不是所有的onnx模型都能在微信小程序部署,有些算子不支持,这种情况需要点特殊操作。 微信小程序提供的接口相当于使用onnxr

    2024年04月27日
    浏览(46)
  • 【微信小程序】富文本rich-text的图片预览效果的几种方法

    使用原生小程序开发,实现在富文本rich-text中的图片预览效果的几种方法对比。 update:因为方案3wxparser后续没有再维护,解析微信公众号文章时会出现排版错误的问题。作为插件也很难二次开发。换成 mp-html 了 一个不需要用额外组件或插件的方法: 思路 :使用正则把图片的

    2023年04月08日
    浏览(33)
  • 微信小程序常用路由跳转方法

            navigator 标签         属性:                 url:要跳转的路径(可以使用相对路径,也可以使用绝对路径)                 open-type:跳转方式。默认值为 navigat ,不能跳转至tabBar页面。                                     当值为  swi

    2024年02月09日
    浏览(34)
  • 微信小程序常用页面监听跳转方法

    使用wx.navigateTo(Object object)方法跳转,此跳转方法会保留当前页面,将跳转到应用内的某个页面,特别注意,此方法不能跳到 tabbar 页面,也就是咱们常用的底部菜单栏对应的tabbar 页面。具体示例代码: 这只是常见的用法,如果需要数据回调,可参考微信官方文档。 2. 使用

    2024年02月13日
    浏览(35)
  • 微信小程序弹窗

    微信小程序自定义底部、顶部、中间、左边、右边弹窗 简单的微信小程序弹窗功能,具体实现过程,请浏览代码。 顶部弹出窗图例: 中间弹出窗图例: 底部弹出窗图例: 左边弹出窗图例: 右边弹出窗图例: wxml代码 wxss代码 js代码 代码简洁,类型齐全。本人才疏学浅,代

    2024年02月11日
    浏览(43)
  • 微信小程序——弹窗组件

    1、父组件.wxml 2、父组件.json 2、父组件.js

    2024年02月13日
    浏览(30)
  • 【微信小程序】从 npm 引入第三方依赖时提示依赖异常的解决方法

           微信小程序不允许使用 Node.js 的内建模块。但是部分第三方依赖(如 crypto-js)在运行时会尝试引入 Node.js 内建模块(实际非强制调用),这一举动被微信开发工具误以为是未知的依赖调用。 移除构建 npm 时生成的外部依赖项即可。 1. 找到并打开“/miniprogram_npm/crypto

    2024年02月15日
    浏览(37)
  • 关于微信小程序--授权弹窗

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

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

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

    2023年04月08日
    浏览(31)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包