小程序的三种弹框showToast、showModal、showLoading

小程序常用的三种弹框有：

        showToast：消息提示框

        showModal：模态对话框

        showLoading：加载框

第一： showToast：消息提示框

默认的样式

自定义icon图标

具体代码如下：

wx.showToast({title: '成功',//提示内容icon: 'loading',//图标（success成功图标、error失败图标、loading加载图标、none不显示图标）image:'../../img/001.png',//自定义图标的本地路径，image层级高于iconduration: 2000,//提示的延时时间mask:true,//是否显示透明蒙层，防止触摸穿透success(){},//调用成功函数fail(){},//调用失败函数complete(){},//成功/失败调用都会执行
})

官方文档地址：wx.showToast(Object object) | 微信开放文档

第二：showModal：模态对话框

具体代码如下：

wx.showModal({title: '提示',content: '这是一个模态弹窗',//editable如果为true，这就是输入框的内容editable:true,//是否显示输入框placeholderText:'请输入内容吧',//输入框的默认内容success (res) {if (res.confirm) {console.log('用户点击确定',res)} else if (res.cancel) {console.log('用户点击取消')}}
})

官方文档地址：wx.showModal(Object object) | 微信开放文档

第三：showLoading：加载框

具体代码如下：

wx.showLoading({title:'加载中...'
})
setTimeout(function () {wx.hideLoading()
},2000)

官方文档地址：wx.showLoading(Object object) | 微信开放文档

小程序的三种弹框showToast、showModal、showLoading相关推荐

微信小程序，实现首页弹框活动引导功能
目录 1.需求 2.数据库设计 3.Java后台配置实现 4.微信小程序前端实现 1.需求后台可以配置活动时间,在活动期间,自动在小程序首页,以弹框形式显示活动图片.用户可以关闭活动图片的显示. 1 ...
JavaScript的三种弹框
js的三种弹框 js分别有三种弹框,分别是警告框.确认框.对话框警告框 alert() alert("你卡余额已不足,请及时充钱!!!") 效果确认框 confirm() co ...
微信小程序之toast等弹框提示
微信小程序中toast消息提示框只有两种显示的效果,就是成功和加载,使用wx.showToast(OBJECT). 看下有关参数说明: 代码很简单: wx.showToast({title: '成功' ...
小程序的三种生命周期
小程序有3种生命周期分别是:全局级别,页面级别.组件级别在小程序中 ,通过App()来注册一个小程序 ,通过Page()来注册一个页面,通过Component()来注册一个组件. 1.全局生命周期 ...
Android常见的三种弹框
Android在开发中经常会遇到有弹框的需求.经常使用的有Dialog 弹框,Window弹框,Activity伪弹框这三种. 感谢http://sigechuizi.cn/article/107 A ...
微信小程序的几种弹出提示框
1.wx.showToast 消息提示框 //icon:success 成功图标,loading 加载图标 (7个汉字长度),none不显示(两行文字) //image:设置自定义图标,优先级高于ic ...
js 自带的三种弹框
1 警告框alert() 2 确认框confirm() 3 提示框prompt() 一个代码 <!DOCTYPE html> <html><head><met ...
微信小程序实现遮罩层( 弹框 / 浮层 )
这个浮层可以达到的效果如下: 浮层弹出时 , 浮层下的页面不可以滑动; 点击对话框以外的区域 , 对话框消失; 点击对话框内的区域 , 浮层不消失; 效果图: 代码如下: wxml文件 <vie ...
Android 几种弹框样式自定义Dialog PopupWindow的使用
1.弹框的波浪线是动态的和小度弹框样式相似用到PopWindow 和自定义View . 2.这个弹框是动态的用于网络加载时候用到自定义Dialog 3.这就是一简单通用的弹框样式第一种弹框 ...

小程序的三种弹框showToast、showModal、showLoading

小程序的三种弹框showToast、showModal、showLoading相关推荐

最新文章

热门文章