微信小程序image设置加载loading
时间: 2023-06-19 12:03:14 浏览: 248
bsj:微信小程序基本组件和API已撸完,做成一个精简版的百思不得姐,包括段子,图片,音频,视频,四个模块。选项卡使用方式网络调用真实接口loading使用滚动视图实现刷新上拉加载image组件对图片的处理,音乐和视频组件的使用替换传递值使用等等等。。。
你可以在设置image标签时,添加一个loading属性,来实现图片加载时的loading效果。例如:
```html
<image src="{{imageUrl}}" mode="aspectFit" loading="{{true}}"></image>
```
这里的loading属性设置为true,表示开启loading效果。当图片加载完成后,loading效果将会自动消失。
你也可以自定义loading效果,只需要在样式表中定义一个名为"wx-image__loading"的class,然后在该class中设置loading效果的样式即可。例如:
```css
.wx-image__loading {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #f5f5f5;
}
```
这里的loading效果是一个灰色背景,并且居中显示一个loading图标。
阅读全文