uni-app仿接口拿到数据，实现上拉加载数据，下拉刷新

pages.json配置

tips：下拉刷新，enablePullDownRefresh要设置在根页面下===外层容器 （设置在局部组件配置没有用）

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app",
				"enablePullDownRefresh": true,
				"onReachBottomDistance": 50
			}
		},
		{
			"path" : "pages/home/home",
			"style" : 
			{
				"navigationBarTitleText" : ""
				
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

home.vue

下拉刷新，pageNo要重置为1，dataList为空数组

上拉加载，template绑定的v-for循环dataList为一个每取一页page，page的大小为pageSize的数据就加到这个数组里

<template>
	<view>
		<view v-for="(item, index) in data.dataList" :key="index">
			<image :src="item" mode="aspectFit" alt="" />
			<view>列表长度--{{index+1}}</view>
		</view>
		<uni-load-more :status="data.status"></uni-load-more>
	</view>
</template>

<script setup>
	import { ref, getCurrentInstance } from 'vue';
	import { onLoad, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
	const instance = getCurrentInstance()
	const data = ref({
		pageNo: 1,
		pageSize: 20,
		dataListAll: [],
		dataList: [],
		urls: [
			'https://c-ssl.dtstatic.com/uploads/blog/202309/30/m7SDeYgGtNeOgBv.thumb.1000_0.jpg_webp',
			'https://c-ssl.dtstatic.com/uploads/blog/202309/30/jJSdpZOAieOQ2W7.thumb.1000_0.jpg_webp',
			'https://c-ssl.dtstatic.com/uploads/blog/202407/07/JOS3D15PHWlgMMj.thumb.1000_0.jpg',
			'https://c-ssl.dtstatic.com/uploads/blog/202407/07/N5Soj12LHPgDXXb.thumb.1000_0.jpg',
			'https://c-ssl.dtstatic.com/uploads/blog/202406/06/0GSPwB9Ju0V0zDP.thumb.1000_0.jpg',
			'https://c-ssl.dtstatic.com/uploads/blog/202406/06/Q2SZMNDnH8y8p3J.thumb.1000_0.jpg',
			'https://c-ssl.dtstatic.com/uploads/blog/202406/06/n6SPma7Mu9v9GPb.thumb.1000_0.jpg',
			'https://c-ssl.dtstatic.com/uploads/blog/202405/01/OoSz01Qqf63gxE3.thumb.1000_0.jpg',
			'https://c-ssl.dtstatic.com/uploads/blog/202402/22/2YSzxdB2f6ge6op.thumb.1000_0.jpg',
			'https://c-ssl.dtstatic.com/uploads/blog/202312/23/LyS3zdyBHqJQ1l2.thumb.1000_0.jpg',
		],
		status: 'noMore',
	})
	
	// 页面加载,dataListAll数组得到所有数据, dataList数组得到当页数据
	onLoad(async () => {
		data.value.dataListAll = await loadMore()
		console.log('初始dataListAll',data.value.dataListAll)
		getPageData()
		// console.log('dataList',data.value.dataList)
	})
	
	onPullDownRefresh(async () => {
		console.log('下拉刷新-->>')
		// 重置分页数据
		data.value.pageNo = 1
		data.value.dataList = []  // 清空当前数据列表
		data.value.dataListAll = await loadMore()
		console.log('刷新dataListAll',data.value.dataListAll)
		getPageData()
		uni.stopPullDownRefresh()
		
	})
	
	// 监听触底，执行的周期函数
	onReachBottom(() => {
		data.value.status = 'loading'
		// 触一次底, dataList数组里再获取20条数据
		setTimeout(() => {
			data.value.status = 'noMore'
			data.value.pageNo++
			getPageData()
		}, 500)
	})
	
	
	// 获取所有数据，得到list[],数组里包含着120个带有地址的对象{url: ''}
	function loadMore () {
		return new Promise((resolve, reject) => {
			setTimeout(() => {
				const list = []
				for (let i = 0; i < 120; i++) {
					list.push(data.value.urls[Math.floor(Math.random() * data.value.urls.length)])
				}
				resolve(list)
			}, 500)
		})
	}
	
	// 获取分页数据，每次请求每页的20张图片,放到datalist里
	function getPageData () {
		let curDataList = data.value.dataListAll.slice((data.value.pageNo-1) * data.value.pageSize, data.value.pageNo * data.value.pageSize)
		if (curDataList.length) {
			data.value.dataList.push(...curDataList)
		}
	}
	// console.log('urls:', data.value.urls)
</script>

<style lang="scss">

</style>

效果：

上拉加载，下拉刷新

tabBar成功显示

tips：list选项里一定要包含index.vue（一开始首页的显示，必然会需要一个激活的tab，不能没有，不然那个tabBar不显示，无效）

"tabBar": {
		// 未选文字颜色
		"color": "#f3f3f3",
		// 选定文字颜色
		"selectedColor": "#f461a8",
		"borderStyle": "black",
		"backgroundColor": "#0b0b0b",
		"position": "bottom",
		// list里必须要有index，不然不显示
		"list": [{
			"pagePath": "pages/index/index",
			"iconPath": "static/home.png",
			"selectedIconPath": "static/home_active.png",
			"text": "首页"
		},
		{
			"pagePath": "pages/details/details",
			"iconPath": "static/category.png",
			"selectedIconPath": "static/cart_active.png",
			"text": "详情"
		},
		{
			"pagePath": "pages/cart/cart",
			"iconPath": "static/cart.png",
			"selectedIconPath": "static/cart_active.png",
			"text": "购物车"
		},
		{
			"pagePath": "pages/profiles/profiles",
			"iconPath": "static/profile.png",
			"selectedIconPath": "static/profile_active.png",
			"text": "个人中心"
		}]
	}

效果：