uniapp loading
时间: 2023-07-24 16:04:51 浏览: 50
在 Uni-app 中,你可以使用 `uni.showLoading` 和 `uni.hideLoading` 方法来显示和隐藏加载动画。以下是一个简单的示例:
```javascript
methods: {
showLoading() {
uni.showLoading({
title: '加载中...',
mask: true // 是否显示透明蒙层,防止触摸穿透,默认为 false
});
},
hideLoading() {
uni.hideLoading();
}
}
```
你可以在需要显示加载动画的地方调用 `showLoading` 方法,然后在需要隐藏加载动画的地方调用 `hideLoading` 方法。例如,在发送请求之前显示加载动画,在请求完成后隐藏加载动画。
```javascript
methods: {
fetchData() {
this.showLoading();
// 发送请求
axios.get('http://api.example.com/data')
.then(response => {
// 处理响应
console.log(response.data);
})
.catch(error => {
// 处理错误
console.error(error);
})
.finally(() => {
this.hideLoading();
});
}
}
```
这样,当发送请求时,会显示加载动画,请求完成后加载动画会被隐藏。记得在实际使用时根据需要调整代码和样式。