以下是一个微信小程序Loading加载和提示框的代码示例:
{{toastText}}
// js文件
Page({
data: {
isLoading: false,
isToastHidden: true,
toastText: ''
},
showLoading() {
this.setData({
isLoading: true
})
setTimeout(() => {
this.setData({
isLoading: false
})
}, 3000)
},
showToast() {
this.setData({
isToastHidden: false,
toastText: '这是一个提示框'
})
setTimeout(() => {
this.setData({
isToastHidden: true
})
}, 2000)
}
})/* wxss文件 */
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
button {
margin-bottom: 20px;
}
toast {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, .7);
color: #fff;
padding: 10px;
border-radius: 5px;
}我们在wxml文件中定义了两个按钮来分别触发显示Loading和提示框的功能。在js文件中,我们定义了两个函数来控制Loading和提示框的显示和隐藏,并通过setData方法来更新data中的isLoading、isToastHidden和toastText状态。在wxss文件中,我们定义了toast的样式。
上一篇:微信小程序上传文件以及下载文件
下一篇:setData性能问题如何优化