81 lines
1.7 KiB
Vue
81 lines
1.7 KiB
Vue
|
|
<script setup>
|
|
import {ref} from "vue"
|
|
import newsCard from '@/components/newsCard.vue';
|
|
const caseList=ref([
|
|
{},{},{},
|
|
])
|
|
const isLoading=ref(false);
|
|
const status=ref("more");
|
|
|
|
// const caseList = reactive([{
|
|
// title:"测试",
|
|
// image:'/static/stu.png',
|
|
// detile:"这是一个测试",
|
|
// time:"2024-6-1"
|
|
// }])
|
|
// 加载更多数据
|
|
const loadMore=async()=>{
|
|
console.log("加载更多...");
|
|
status.value="loading";
|
|
if (isLoading.value) return;
|
|
isLoading.value = true;
|
|
const newCases = await fetchCases();
|
|
caseList.value.push({});
|
|
caseList.value.push({});
|
|
caseList.value.push({});
|
|
caseList.value.push({});
|
|
console.log("加载更多2...");
|
|
isLoading.value = false;
|
|
status.value = "nomore";
|
|
console.log("加载更多2...");
|
|
}
|
|
const fetchCases=()=>{
|
|
return new Promise((resolve) => {
|
|
setTimeout(() => {
|
|
const newCases = [
|
|
{ id: 1, title: "Case 1" },
|
|
{ id: 2, title: "Case 2" }
|
|
];
|
|
resolve(newCases);
|
|
}, 1000);
|
|
});
|
|
}
|
|
</script>
|
|
<template>
|
|
<view class="">
|
|
<scroll-view
|
|
scroll-y
|
|
@scrolltolower="loadMore"
|
|
class="case-list"
|
|
>
|
|
<view class="list-itme" v-for="(item, index) in caseList" :key="index">
|
|
<CaseBox ></CaseBox>
|
|
</view>
|
|
<view v-if="isLoading" class="loading">
|
|
<up-loadmore :status="status" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
.case-list{
|
|
scrollbar-width: none;
|
|
// height: 40vh;
|
|
// overflow: auto;
|
|
height: 100vh;
|
|
display: flexbox;
|
|
flex-flow: column;
|
|
background-color: #e2e2e2;
|
|
}
|
|
.list-itme{
|
|
width: 98%;
|
|
height: 350rpx;
|
|
margin: 10rpx auto;
|
|
// background-color: #000;
|
|
}
|
|
</style>
|