基于uniapp写一个下拉加载
时间: 2023-05-21 15:04:57 浏览: 86
你可以使用uniapp的自带组件list来实现下拉加载,具体实现步骤如下:
1. 在template中使用list组件,设置ref="list"和@load-more回调函数:
```html
<template>
<list
ref="list"
:finished="finished"
finished-text="已经到底了!"
@load-more="loadMore">
<view v-for="(item, index) in items" :key="index" class="item">{{ item }}</view>
</list>
</template>
```
2. 在script中声明数据和函数:
```javascript
export default {
data() {
return {
items: [],
pageIndex: 1, // 用于计算下一页的页码
pageSize: 10, // 每页显示的数据条数
finished: false // 是否已经加载完所有数据的标志
}
},
methods: {
async loadMore() {
// 加载下一页数据
const res = await fetch(`https://example.com/api/data?page=${this.pageIndex}&pageSize=${this.pageSize}`)
const resJson = await res.json()
// 如果服务器返回了数据
if (resJson.code === 0 && resJson.data.length) {
// 更新数据并增加页码
this.items = this.items.concat(resJson.data)
this.pageIndex++
// 如果返回的数据不足一页,则说明已经到底了
if (resJson.data.length < this.pageSize) {
this.finished = true
}
// 通知list组件加载完成
this.$refs.list.loaded()
} else {
// 否则说明出错了,给用户提示
uni.showToast({
title: "加载失败,请稍后重试"
})
}
}
}
}
```
3. 编写样式,并添加下拉刷新组件:
```html
<template>
<view>
<uni-refresh refresher-enabled @refresh="refresh">
<view v-for="(item, index) in items" :key="index" class="item">{{ item }}</view>
</uni-refresh>
<list
ref="list"
:finished="finished"
finished-text="已经到底了!"
@load-more="loadMore">
</list>
</view>
</template>
<style lang="scss">
.item {
height: 100px;
line-height: 100px;
text-align: center;
border-bottom: 1px solid #ccc;
}
</style>
```
4. 实现下拉刷新功能:
```javascript
export default {
data() {
return {
items: [],
pageIndex: 1, // 用于计算下一页的页码
pageSize: 10, // 每页显示的数据条数
finished: false, // 是否已经加载完所有数据的标志
triggered: false // 是否触发下拉刷新的标志
}
},
methods: {
async loadMore() {
// 同上
},
async refresh() {
// 重置页码和数据
this.pageIndex = 1
this.items = []
// 加载第一页数据
const res = await fetch(`https://example.com/api/data?page=1&pageSize=${this.pageSize}`)
const resJson = await res.json()
// 如果服务器返回了数据,则更新数据
if (resJson.code === 0 && resJson.data.length) {
this.items = resJson.data
// 通知list组件和下拉刷新组件加载完成
this.$refs.list.loaded()
this.triggered = false
} else {
// 否则给用户提示
uni.showToast({
title: "刷新失败,请稍后重试"
})
this.triggered = false
}
}
}
}
```
这样就实现了基于uniapp的下拉加载功能。