微信小程序:消息提示框
前言
相比H5弹出框的实现方式要么用插件,要么自己写;微信小程序则提供了几个弹出框api,使用起来更简单、方便;每个api都有不同的使用方式、场景,今天我们就来说说小程序的几种弹出框。
目录
- wx.showToast()
- wx.showModal()
- wx.showLoading()
- wx.showActionSheet()
- wx.hideToast()
- wx.hideLoading()
正文
一、wx.showToast()
显示消息提示框;
wx.showToast({title: "成功", // 提示的内容icon: "success", // 图标,默认successimage: "", // 自定义图标的本地路径,image 的优先级高于 iconduration: 3000, // 提示的延迟时间,默认1500mask: false, // 是否显示透明蒙层,防止触摸穿透success: function () {console.log("接口调用成功的回调函数");},fail: function () {console.log("接口调用失败的回调函数");},complete: function () {console.log("接口调用结束的回调函数(调用成功、失败都会执行)");}
})
icon的值一共3个:
- success:显示成功图标,此时 title 文本最多显示 7 个汉字长度
- loading:显示加载图标,此时 title 文本最多显示
- 7 个汉字长度 none:不显示图标,此时 title 文本最多可显示多行
效果展示:
二、wx.showModal()
显示模态对话框
wx.showModal({title: "温馨提示", // 提示的标题content: "提示内容提示内容提示内容提示内容", // 提示的内容showCancel: true, // 是否显示取消按钮,默认truecancelText: "取消", // 取消按钮的文字,最多4个字符cancelColor: "#000000", // 取消按钮的文字颜色,必须是16进制格式的颜色字符串confirmText: "确定", // 确认按钮的文字,最多4个字符confirmColor: "#576B95", // 确认按钮的文字颜色,必须是 16 进制格式的颜色字符串success: function (res) {console.log("接口调用成功的回调函数");if (res.confirm) {console.log('用户点击确定')} else if (res.cancel) {console.log('用户点击取消')}},fail: function () {console.log("接口调用失败的回调函数");},complete: function () {console.log("接口调用结束的回调函数(调用成功、失败都会执行)");}
})
success(调用成功):可以监测用户点击确定或取消按钮
- confirm:为 true 时,表示用户点击了确定按钮
- cancel:为 true 时,表示用户点击了取消
效果展示:
三、wx.showLoading()
显示 loading 提示框,需主动调用 wx.hideLoading 才能关闭提示框;
wx.showModal({title: "温馨提示", // 提示的内容mask: true, // 是否显示透明蒙层,防止触摸穿透success: function (res) {console.log("接口调用成功的回调函数");},fail: function () {console.log("接口调用失败的回调函数");},complete: function () {console.log("接口调用结束的回调函数(调用成功、失败都会执行)");}
})
温馨提示:
- 需主动调用wx.hideLoading才能关闭提示框,可设置延迟自动关闭;
- 常用于接口请求,请求时wx.showLoading,成功返回数据后wx.hideLoading,可以避免接口请求时用户多次点击。
效果展示:
四、wx.showActionSheet()
显示操作菜单
wx.showActionSheet({itemList: ["1号", "2号", "3号", "4号", "5号", "6号"], // 按钮的文字数组,长度最大为6itemColor: "#000000", // 按钮的文字颜色,默认#000000success: function (res) {console.log("接口调用成功的回调函数");// 用户点击的按钮序号,从上到下的顺序,从0开始console.log(res.tapIndex)},fail: function () {console.log("接口调用失败的回调函数");},complete: function () {console.log("接口调用结束的回调函数(调用成功、失败都会执行)");}
})
success(调用成功):可以返回用户点击的序号
- tapIndex:用户点击的按钮序号,从上到下的顺序,从0开始
效果展示:
五、wx.hideToast()
隐藏消息提示框
wx.hideToast();
六、wx.hideLoading()
隐藏 loading 提示框
wx.hideLoading();
总结
- wx.showLoading 和 wx.showToast 同时只能显示一个;
- wx.showToast应与wx.hideToast配对使用;
- wx.showLoading应与wx.hideLoading配对使用;
微信小程序:消息提示框相关推荐
- 微信小程序-消息提示框实例
做Android的时候对toast是很熟悉的.微信小程序开发中toast也是重要的消息提示方式. 提示框: wx.showToast(OBJECT) 显示消息提示框 OBJECT参数说明: 示例代码: ...
- 微信小程序自定义提示框制作的简单方法
微信小程序自定义提示框制作的简单方法 下面的时候提示框的结构 wxml部分 <!-- 提示框 --> <view class="showToast" wx:if= ...
- 微信小程序之提示框弹框
1.显示消息提示框,长度不超过12个字节,即6个汉字 wx.showToast({ title: '演示1', }) 2.显示loading提示框,主动调用wx.hideLoading()才能关闭 w ...
- 微信小程序tooltip提示框组件
需要将文件引入需要插件的.json文件的usingComponents里. 算了,直接看代码理解把,有问题联系会及时回复. 文件结构,我这里组件放在根目录的cpmponents文件夹里面 index. ...
- 【微信小程序】提示框、选择框、选择菜单
一.提示框 wx.showToast({title: '刷新成功',//提示文字duration:2000,//显示时长mask:true,//是否显示透明蒙层,防止触摸穿透,默认:false ico ...
- 微信小程序 之提示框
结构可自行修改 <view class="showModule" wx:if="{{isShow}}" ><!-- 这部分内容可以灵活修改,例 ...
- 微信小程序的提示框 showToast 去掉勾,设置icon为null没有效果
设置icon为null这个功能是在1.9之后的版本才支持的,所以需要修改版本号,project.config.json这里文件里面,在根目录下 ,亲们,有用就给个赞吧,谢谢
- 微信小程序消息推送,实现未完成计划的在微信内的定时提醒功能
微信小程序消息提醒(微信内提醒) 提示:此处仅是小程序消息提醒的一个小例子,希望能够为大家抛砖引玉 目录 微信小程序消息提醒(微信内提醒) 需求及效果展示 一.实现思路 二.实现步骤 1.获取模板ID ...
- 微信小程序消息模板设计及实现
本文以微信小程序内置的两个模板:购买成功和评论回复提醒为例来阐述第三方微信小程序平台的设计. 小程序端 微信用户支付成功后,微信服务通知中会收到支付成功服务提醒.见下图: 商家端 用户完成评价后,商家 ...
- 微信小程序消息通知开发
微信小程序消息通知开发及注意点 大致流程图: #mermaid-svg-kKvz8B789cmQ7zco {font-family:"trebuchet ms",verdana,a ...
最新文章
- 如何学好机器学习数据挖掘?这本《数据分析数学基础》图文并茂带你学习入门...
- python考级证书-Python 全国考级二级
- 计算机应用技术国外现状,浅析计算机应用技术的现状及发展趋势
- [jQuery原理] jQuery事件操作相关方法
- java八种包装_Java的八种基本数据类型及其包装类
- linux卸载emc硬盘,关于EMC symmetrix新分磁盘在Linux主机无法fdisk? 求助
- i2c传输距离_使用 ToF 传感器进行距离测量和手势识别的基本原理
- HTTP Header 详解 Requests 与 Responses 头信息
- WPS检测到字体缺失Windows字体包方正字体库
- 查看javajdk版本
- nagios——短讯报警
- CC2430基础——IAR的安装及配置
- 蘑菇街面经(自己的第一次秋招面试)
- “智慧机场3.0”样板工程 北京大兴机场物联网系统有多牛?
- 计算偏相关系数和复相关系数
- iNFTnews丨模因、神话和NFT是如何建立文化认同的?
- 西安电子科技大学经济与管理学院861上岸学姐考研经验分享
- 2015年职称计算机考试宝典,2015年度职称计算机考试宝典.doc
- 狂写2万字带你快速上手React
- 仿射密码破解——再别康桥
热门文章
- 通往低抵押的DeFi之路
- 新概念英语1册19课
- harbor使用免费证书配置https
- centos 服务器传文件,CentOS下怎么用SCP命令进行服务器之间的文件传输?
- Android gps 关于SUPL介绍
- Kooboo CMS - Html.FrontHtml[Helper.cs] 各个方法详解
- JZOJ 4230. 【五校联考4day1】淬炼神体
- 论文阅读2--Video text localization based on Adaboost(基于Adaboost的视频文本定位)阅读笔记
- Centos 7宝塔安装
- 阿里高工内产的 SpringBoot 保姆级笔记,面面俱到,太全了