以下是一个微信小程序Loading加载和提示框的代码示例:
// 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的样式。