小程序中展示弹窗有四种方式:showToast
、showModal
、showLoading
、showActionSheet
官方文档链接
效果图
wxml
<button size="mini" bindtap="handleShowToast">ShowToast</button>
<button size="mini" bindtap="handleShowModal">OnShowModal</button>
<button size="mini" bindtap="handleShowLoading">OnShowLoading</button>
<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
})
setTimeOut(() => {
wx.hideLoading();
}, 2000)
},
handleShowAction() {
wx.showActionSheet({
itemList: ['拍照','相机']
success: (res) => {
switch(res.tapIndex) {
case 0:
console.log('用户点击了拍照')
break;
case 1:
console.log('用户点击了相机')
break;
}
}
})
}
})