在开发小程序时,页面显示的数据都是来源于服务器,那么客户端请求服务端数据时,涉及到网络环境比较坏,或者服务端返回数据缓慢时,页面会呈现假死的状态,这样用户体验比较差,那么在进行请求时,我们可以显示加载框,给予用户提示数据加载(loading)中,当数据加载出现异常时,给予用户提示信息(toast)。
微信小程序api提供了这些操作的方法,方法如下:
- wx.showToast():显示toast
- wx.hideToast():隐藏toast
- wx.showLoading(): 显示加载框
- wx.hideLoading():隐藏加载框
- wx.showModal():显示对话框
话不多说,撸一段代码看看具体效果:
wxml:
<view class='container'>
<button bindtap='showToast' class='btn'>showToast</button>
<button bindtap='hideToast' class='btn'>hideToast</button>
<button bindtap='showLoading' class='btn'>showLoading</button>
<button bindtap='hideLoading' class='btn'>hideLoading</button>
<button bindtap='showModal' class='btn'>showModal</button>
</view>
js:
// pages/message/message.js
Page({
/**
* 页面的初始数据
*/
data: {
itemList: ["菜单1", "菜单2", "菜单3", "菜单4"]
},
//显示Toast
showToast(e) {
wx.showToast({
title: '提示信息',
},60000)
},
//隐藏Toast
hideToast(e) {
wx.hideToast()
},
//显示Loading
showLoading(e) {
wx.showLoading({
title: '加载中',
},60000)
},
//隐藏Loading
hideLoading(e) {
wx.hideLoading()
},
//显示提示框
showModal(e) {
wx.showModal({
title: '提示',
content: '这是提示框',
success(res){
console.log(res)
if (res.confirm) {
console.log('用户点击确定')
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
}
})
编译代码运行效果:
13-1.gif
网友评论