uniapp 列表上拉加载，下拉刷新

<template>
	<view class="goods-list">
		<goods-list :goods="goods"></goods-list>
		<view>我是有底线的</view>
	</view>
</template>
<script>
	import goodsList from '../../components/goods-list/goods-list.vue'
	export default {
		data() {
			return {
				pageindex: 1,
				goods: [],
				flag: false
			}
		},
		components: {"goods-list": goodsList},
		methods: {
			async goodsList(callBack) {
				const res = await uni.$myRequest({
					url: '/api/getGoods?pageindex='+this.pageindex
				})
				this.goods = [...this.goods, res.data.message]
				callBack && callBack()
			}
		},
		onLoad() {
			this.getGoodsList()
		},
		onReachBottom() {
			// 上拉加载
			if (this.goods.length < 10) return this.flag = true
			console.log('触底了')
			this.pageindex++
			this.goodsList()
		},
		onPullDownRefresh() {
			//  下拉刷新
			console.log('下拉刷新了')
			this.pageindex = 1
			this.goods = []
			this.falg = false
			setTimeout(()=>{
				this.goodsList(()=>{
					uni.stopPullDownRefresh()
				})
			}, 1000)
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
</style>

goods-list.vue

<template>
	<view class="goods-list">
		<view class="goods-item" v-for="item in goods" :key="item.id">
			<iamge :src="item.img_url"></iamge>
			<view class="price">
				<text>{
   
   {item.sell_price}}</text>
				<text>{
   
   {item.market_price}}</text>
			</view>
			<view class="name">
				{
   
   {item.title}}
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		props:['goods'],
		methods: {
			
		}
	}
</script>

<style>

</style>