微信小程序展示弹窗的几种方式
2023-02-18 16:30:15 时间
小程序中展示弹窗有四种方式:showToast
、showModal
、showLoading
、showActionSheet
效果图
https://img-blog.csdnimg.cn/20200824143538219.gif#pic_center
wxml
<!-- 1.消息提示框 -->
<button size="mini" bindtap="handleShowToast">ShowToast</button>
<!-- 2.模态对话框 -->
<button size="mini" bindtap="handleShowModal">OnShowModal</button>
<!-- 3.loading提示框 -->
<button size="mini" bindtap="handleShowLoading">OnShowLoading</button>
<!-- 4.操作菜单 -->
<button size="mini" bindtap="handleShowAction">OnShowActionSheet</button>
js
Page({
handleShowToast() {
wx.showToast({
title: '内容', //提示的内容
duration: 2000, //持续的时间
icon: 'loading', //图标
mask: true //显示透明蒙层 防止触摸穿透
})
},
handleShowModal() {
wx.showModal({
title: '我是标题', //提示的标题
content: '我是内容,111' //提示的内容
success: function(res) {
if(res.confirm) {
console.log('用户点击了确定')
} else if(res.cancel) {
console.log('用户点击了取消')
}
}
})
},
handleShowLoading() {
wx.showLoading({
title: '加载中。。。', //提示的内容
masl: true //显示透明蒙层 防止触摸穿透
})
//showLoading需要调用wx.hideLoading()关闭
setTimeOut(() => {
wx.hideLoading();
}, 2000)
},
handleShowAction() {
wx.showActionSheet({
itemList: ['拍照','相机'] //文字数组
success: (res) => {
switch(res.tapIndex) {
case 0:
console.log('用户点击了拍照')
break;
case 1:
console.log('用户点击了相机')
break;
}
}
})
}
})
相关文章
- 从零开始搞监控系统(5)——小程序监控
- Pyinstaller打包配置UPX缩小程序包大小,打包时出现UPX is not available处理方法
- 如何将小程序游戏引入自有APP?(Android篇)
- 超级App成为小程序流量新的变现突破口
- 小程序小游戏怎样实现在自己的App里上架运行?
- Vue 网络请求模块封装 (axios)
- 微信小程序中的支付宝支付
- 小程序中商家入驻提醒、新订单提醒
- 用这个库 3 分钟实现让你满意的表格功能:Bootstrap-Table
- 利用Frida绕过Android App(apk)的SSL Pinning
- Flask 框架:运用Axios库实现前后端交互
- 搭建Typecho小程序(QQ微信通用)
- Drozer-Android安全测试
- 个推支持小程序消息推送,助力开发者实现用户高触达、高转化
- android 终端模拟器
- android 系统浏览器 源码-Android 最最最简单的浏览器代码
- Android画中画(PIP)模式使用
- Android画中画(PIP)进阶---Action按钮的使用
- Android Kotlin制作签名白板并保存图片
- IOS中block和代理