uni-app上拉刷新下拉加载常用思维

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)
			
		}