uniapp 右侧刷新图标 和 返回顶部图标的实现

<template>
	<view class="container">
		<view class="layout">
			<view class="box" v-for="(item,index) in pets" :key="item._id">
				<view class="pic">
					<image :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">{{item.content }}</view>
				<view class="author">---- {{item.author}}</view>
			</view>
		</view>
		<!-- 按钮刷新和返回顶部 -->
		<view class="float">
			<view class="item" @click="onRefresh">
				<!-- 组件->图标 -->
				<uni-icons type="refreshempty" size="30" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="up" size="30" color="#888"></uni-icons>
			</view> 
			<view class="box"></view>
		</view>
		
		<!-- 加载更多 -->
		<view class="loadMore">
			<uni-load-more status="more"></uni-load-more>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
//触底加载更多  ，下拉刷新API(下拉刷新需要在pages.json里面开启这项功能)
import {onReachBottom,onPullDownRefresh} from "@dcloudio/uni-app"
	const pets = ref([]);
	
	// 触底加载更多，实现连接，使用展开符
	// let arr1 = [1,2,3];
	// let arr2 = [4,5,6];
	// console.log([...arr1,...arr2]);
	
	// 点击预览
	const onPreview = function (index){
		let urls = pets.value.map(item=>item.url)
		uni.previewImage({
			current:index,
			urls
		})
		// console.log(index);
	}
	
	// 点击刷新
	const onRefresh = function(){
		console.log("刷新");
		// API->界面->下拉刷新
		uni.startPullDownRefresh()
	}
	// 返回顶部
	const onTop = function(){
		console.log("返回顶部");
		// API->界面->滚动
		uni.pageScrollTo({
			duration:1000,
			scrollTop:0
			
		})
	}
	
	// 发送网络请求
	function network(){
		uni.showLoading()
		uni.request({
			url:"https://tea.qingnian8.com/tools/petShow",
			data:{
				size:5,
				type: "dog"      //类型有all,cat,dog
			},
			header:{
				"access-key": "xxm456654#@"
			}
		}).then(res=>{
			console.log(res.data.data);
			console.log(res.data.errCode);
			if(res.data.errCode===0){
				// pets.value = res.data.data
				// 触底加载更多 ，展开符
				pets.value = [...pets.value,...res.data.data]
				console.log(pets.value);
			}else if(res.data.errCode===400){
				uni.showToast({
					title:res.data.errMsg,
					icon:"none"
				})
			}
			
		}).catch(err=>{
			uni.showToast({
				title:"请求有误，请重新刷新",
				icon:"none"
			})
		}).finally(()=>{
			uni.hideLoading();
			console.log(123);
			uni.stopPullDownRefresh();
		})
	};
	// 触底加载更多
	onReachBottom(()=>{
		network();
	})
	
	// 下拉刷新
	onPullDownRefresh(()=>{
		pets.value = [];// current.value = 0
		network();
	})
	network();
</script>

---