uniapp上拉刷新,下拉加载更多

需要在 pages.json 里,找到的当前页面的pages节点,并在 style 选项中开启 enablePullDownRefresh。

{
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "uni-app",
                "enablePullDownRefresh": true   //配置为true
            }
        }
<template>
	<view>
		<view  v-for="(item,index) in newList" :key="index">{{item}}</view>
	</view>
</template>

<script>
	var page=1,timer=null;
	export default{
		data(){
			return{
				newList:[]
			}
		},
		onLoad(){	
			this.getList()   //第一次加载数据
		},
		onPUllDownRefresh(){   //触发上拉刷新函数
			if(timer != null){      //为防止回弹多次触发刷新
				clearTimeout(timer)
			}
			timer=setTimeout(()=>{
				this.getList()
			},500)
		},
		onReachBottom(){    //监听页面触底函数
		    if(timer != null){      //为防止回弹多次触发刷新
		    	clearTimeout(timer)
		    }
		    timer=setTimeout(()=>{
		    	getMoreList()
		    },500)
		
		},
		methods:{
			//上拉加载更多
			getMoreList(){
				uni.showNavigationBarLoading();  //导航栏显示加载动画
				uni.request({
					url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
					method:'GET',
					success:res=>{
						console.log(res)
						uni.hideNavigationBarLoading();  //导航栏停止加载动画
						if(res.data=null){
							return false
						}
						this.newList=this.newList.concat(res.data)  //拼接数组
						uni.stopPUllDownRefresh();  //停止刷新
						page++
					}
					
				})
			},
			//下拉刷新
			getList(){
				page=1
				uni.showNavigationBarLoading();  //显示加载动画
				uni.request({
					url:'https://demo.hcoder.net/index.php?user=hcoder&pwd=hcoder&m=list1&page='+page,
					method:'GET',
					success:res=>{
						console.log(res)
						this.newList=res.data
						uni.hideNavigationBarLoading();  //停止加载动画
						uni.stopPUllDownRefresh();  //停止刷新
						page++
					}
					
				})
			}
		}
	}
</script>

<style>
</style>

猜你喜欢

转载自blog.csdn.net/qq_38847914/article/details/103529960