uni-app上拉刷新下拉加载常用思维
下列代码的思路,首先通过接口请求数据,请求的数据结构具体看返回的再去写响应的逻辑,这些没什么好说的主要就是结束下拉刷新是要注意,在你请求数据的方法中,添加一个回调函数,上拉加载不去执行结束下拉刷新的方法,在刷新数据请求回来时候再去执行
<!-- 商品列表页 -->
<view class="good_list">
<!-- 子组件 -->
<good-list :goods='goods'></good-list>
<!-- 触底的文字 -->
<view class="isOver" v-if="flag">-----我是有底线的-----</view>
</view>
export default {
data() {
return {
// 具体逻辑看返回的数据
//因为返回数据是一页显示10条,有3页总共25条
pageIndex:1, //默认第一页
goods:[], //商品列表
flag:false
}
},
components:{
'good-list':goodsList}, //商品信息
methods: {
async getGoodsList(callBack){
const res = await this.$myRequest({
url:'/api/getgoods?pageindex='+this.pageIndex
})
//利用结构将每一页数据跟商品总信息一起返回
this.goods=[...this.goods,...res.data.message],
//因为onLoad里面没有callBack回调函数所以会报错,所以需要加下列代码
callBack && callBack()//如果有回调函数就执行没有就不执行
}
},
onLoad() {
this.getGoodsList()
},
//触底勾子函数
onReachBottom() {
//如果商品个数小于10x页数就说明数据完了,就需要显示触底信息
if(this.goods.length<this.pageIndex*10){
return this.flag=true}
//还没有触底的话就页数加加,再去执行请求数据
this.pageIndex++;
this.getGoodsList()
},
//下拉刷新函数
onPullDownRefresh(){
console.log("下拉刷新了")
//下拉刷新后重新获取第一页的数据
this.pageIndex=1;
//数据重新初始化
this.goods=[]
this.flag=false
//为了看到效果写个计时器
setTimeout(()=>{
this.getGoodsList(()=>{
//调用停止下拉刷新函数
uni.stopPullDownReafresh()
})
},1000)
}