一、uniapp下拉刷新
- 在pages.json中为需要下拉刷新的页面添加enablePullDownRefresh为true
- 使用生命周期函数onPullDownRefresh配合request请求完成数据刷新
{
"path": "pages/goods/goods",
"style": {
"enablePullDownRefresh": true
}
}
二、uniapp上拉请求
- 使用生命周期函数onReachBottom监听页面触底,并配合request请求完成数据刷新
三、具体实现代码如下
<template>
<view class="goodBackground">
<goods-list :goods="goods"></goods-list>
<view class="isOver" v-if="flag">————— 没有更多了 —————</view>
</view>
</template>
<script>
import goodsList from '../../components/goods-list/goods-list.vue'
export default {
components: {
"goods-list": goodsList
},
data() {
return {
goods: [],
pageindex: 1,
flag: false
}
},
methods: {
async getGoodsList(callBak) {
const goodsList = await this.$myRequest({
url: '/api/getgoods?pageindex=' + this.pageindex
})
this.goods = [...this.goods, ...goodsList.data.message]
callBak && callBak()
}
},
onLoad() {
this.getGoodsList()
},
onReachBottom() {
if (this.goods.length < this.pageindex * 10) {
this.flag = true
return
}
this.pageindex++
this.getGoodsList()
},
onPullDownRefresh() {
this.goods = []
this.pageindex = 1
this.flag = false
//此处使用定时器可查看出下拉刷新效果
setTimeout(() => {
this.getGoodsList(() => {
uni.stopPullDownRefresh()
})
}, 1000)
}
}
</script>