<button hover-class="sky" loading="{{paying}}" bindtap="pay">支付</button> data: { paying:false, }, pay(){ this.setData({ paying:true }) } 这个是一直打转 我想要它过几秒后不打转并弹出一个反馈成功的提示框出来要怎么弄
时间: 2024-04-16 20:23:58 浏览: 12
要实现按钮点击后过几秒停止旋转并弹出反馈成功的提示框,你可以按照以下步骤进行操作:
1. 在 `data` 中添加一个用于控制旋转和提示框显示的变量:
```javascript
data: {
paying: false, // 控制旋转
showSuccess: false // 控制提示框显示
},
```
2. 在 `pay` 方法中,使用 `setTimeout` 函数来延时几秒后停止旋转并显示提示框:
```javascript
pay() {
this.setData({
paying: true // 开始旋转
});
setTimeout(() => {
this.setData({
paying: false, // 停止旋转
showSuccess: true // 显示提示框
});
}, 2000); // 延时 2 秒后停止旋转并显示提示框
}
```
3. 在模板中根据变量的值来控制按钮的状态和提示框的显示:
```html
<button hover-class="sky" loading="{{paying}}" bindtap="pay">支付</button>
<!-- 提示框 -->
<view class="success-box" wx:if="{{showSuccess}}">
<view class="success-tip">支付成功</view>
</view>
```
在以上代码中,点击支付按钮后,`pay` 方法会将 `paying` 变量设置为 `true`,按钮开始旋转。通过 `setTimeout` 函数,延时 2 秒后将 `paying` 变量设置为 `false`,按钮停止旋转,并将 `showSuccess` 变量设置为 `true`,提示框显示。
你可以根据实际需求调整延时的时间和提示框的样式。
希望以上信息对你有帮助。如果还有其他问题,请随时提问。