移动端实现上拉加载更多和下拉刷新

1.先放上图片子再放代码

2.下面是实现的代码

<template>
	<view>
		<view class="news_list" v-for="(item, index) in newsList" :key="index">
			<view class="news_img">
				<image :src="item.image" mode="widthFix"></image>
			</view>
			<view class="news_info">
				<view class="news_text">{{ item.title }}</view>
				<view class="news_time">{{ item.passtime }}</view>
			</view>
		</view>
		<p class="title" v-if="flag">-----兄弟，到底了-----</p>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page : 1 ,
				newsList : [],
				flag : false,
			}
		},
		onLoad() {
			this.getNews()
		},
		onPageScroll(){   //页面滚动到底部是请求下一页数据
			if(this.newsList.length < this.page * 10) return this.flag = true;
			this.page ++;
			// console.log('触底');
			this.getNews()
		},
		onPullDownRefresh(){ //页面下拉刷新
			this.page = 1;
			this.newsList = [];
			this.flag = false;
			this.getNews();
			 uni.stopPullDownRefresh(); //跳转刷新
			console.log('刷新了');
		},
		methods: {
			getNews(){
				uni.request({
					url:"https://api.apiopen.top/getWangYiNews",
					method:"POST",
					data: {
					      page: this.page,
					     count: 10
					 },
					  header: {
					         'content-type': 'application/x-www-form-urlencoded' 
					     },
					success: (res) => {
						console.log(res.data.result);
						this.newsList = [...this.newsList , ...res.data.result]
					}
				})
			}
		},
		
	}
</script>

<style>
   .news_list{
	   height: 160rpx;
	   border-bottom: 1px solid #ccc;
	   display: flex;
/* 	   background-color: #4CD964 */
   }
   .news_img{
	   width: 160rpx;
	   height:160rpx;
	   margin: 0 15rpx;
	   display: flex;
	   justify-content: center;
	   align-items: center;
   }
   .news_img image{
	   width: 100%;
   }
   .news_info{
	  width: 500rpx;
	  /* font-size: .24rem; */
	   display: flex;
	   flex-direction: column;
	   justify-content: center;
   }
   .title{
	   text-align: center;
	  padding: 20rpx 0;
	   height: 50rpx;
	   line-height: 50rpx;
   }
</style>