<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 = 0network();})network();
</script>
