uni中加载页如何使用
时间: 2023-09-03 17:16:50 浏览: 39
在uni-app中,可以使用uni-app官方提供的加载页面组件uni-load-more,也可以自定义加载页面。
1. 使用uni-load-more组件
uni-load-more组件是uni-app官方提供的加载页面组件,可以方便地实现下拉刷新和上拉加载更多功能。可以在page.json中配置:
```json
"enablePullDownRefresh": true,
"backgroundTextStyle": "dark",
"usingComponents": {
"uni-load-more": "/components/uni-load-more/uni-load-more"
}
```
然后在页面中使用:
```html
<uni-load-more :status="loadStatus" @loadMore="onLoadMore" :tips="loadTips"></uni-load-more>
```
其中,loadStatus为加载状态,loadTips为加载提示语,onLoadMore为加载更多事件。
2. 自定义加载页面
如果不想使用官方提供的加载页面组件,可以自己编写加载页面。一般来说,加载页面分为两个部分:加载动画和加载提示语。加载动画可以使用Lottie或者其他动画库实现,加载提示语可以使用文本或者图片。
例如,可以在页面中添加一个div元素,用于显示加载动画和提示语:
```html
<div class="loading">
<lottie-player src="/static/lottie/loading.json" loop autoplay></lottie-player>
<p class="loading-text">{{ loadingText }}</p>
</div>
```
其中,lottie-player是Lottie库提供的播放器组件,loadingText为加载提示语。可以在页面的样式文件中定义.loading和.loading-text的样式:
```css
.loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.loading-text {
margin-top: 20rpx;
font-size: 28rpx;
color: #999;
}
```
这样就可以实现自定义的加载页面了。在数据加载完成后,可以将该div元素隐藏。