wx.showloading用法
时间: 2023-05-25 19:05:13 浏览: 1042
wx.showLoading 用于显示加载中的提示框,一般用于加载数据时,提示用户需要等待一段时间。
使用方法如下:
```
wx.showLoading({
title: '加载中'
})
```
其中,title 为提示框中显示的文字,可以自定义修改。
需要注意的是,使用后需要在合适的时机执行 wx.hideLoading() 或者 wx.hideToast(),隐藏提示框,否则提示框会一直显示在页面上。
示例代码:
```
wx.showLoading({
title: '加载中'
})
wx.request({
url: 'https://example.com/data',
success: function (res) {
console.log(res.data)
},
fail: function (err) {
console.log(err)
},
complete: function () {
wx.hideLoading()
}
})
```
相关问题
wx.showloading怎么让加载数据变模糊
您可以尝试使用CSS的`backdrop-filter`属性来实现模糊效果。
1. 首先,将`wx.showloading`方法的调用放到一个函数中,例如:
```javascript
function loadData() {
wx.showLoading({
title: '正在加载中...',
mask: true
});
// 这里是加载数据的代码
wx.hideLoading();
}
```
2. 在CSS中为`wx-loading`元素添加以下样式:
```css
.wx-loading {
backdrop-filter: blur(5px); /* 将5px替换为所需要的模糊半径 */
}
```
完整的代码如下:
```
/* *.wxss */
.wx-loading {
backdrop-filter: blur(5px); /* 将5px替换为所需要的模糊半径 */
}
// *.js
function loadData() {
wx.showLoading({
title: '正在加载中...',
mask: true
});
// 这里是加载数据的代码
wx.hideLoading();
}
```
这样,当`wxLoading`元素出现时,会自动应用该样式,从而实现了模糊效果。请注意,`backdrop-filter`只适用于支持该属性的浏览器和设备,具体兼容性可以查阅相关文档。
小程序中wx.showLoading 怎么去掉默认的样式
您可以使用 `wx.hideLoading()` 隐藏 `wx.showLoading()` 的默认样式,然后自定义你的loading样式。 如果只是想去掉默认样式的话,可以在 `app.json` 中全局设置 `window` 的 `backgroundLoadingColor` 和 `backgroundTextStyle`,具体方法可以参考官方文档。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)