aidlab/lanecarford_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加触底加载

Browse Source
This commit is contained in:
李志鹏
2025-10-17 09:49:30 +08:00
parent c560cb56e6
commit 367d49a6cf
2 changed files with 116 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/MyList.vue
View File

@@ -42,6 +42,7 @@
font-size: 3rem; font-size: 3rem;
color: #000; color: #000;
text-align: center; text-align: center;
margin: var(--my-list-footer-margin, 0);
> .placeholder { > .placeholder {
height: 1px; height: 1px;
} }

215
src/views/Workshop/library.vue
View File

@@ -2,24 +2,31 @@
import { ref, reactive, onMounted, inject } from 'vue' import { ref, reactive, onMounted, inject } from 'vue'
import HeaderTitle from '@/components/HeaderTitle.vue' import HeaderTitle from '@/components/HeaderTitle.vue'
import FooterNavigation from '@/components/FooterNavigation.vue' import FooterNavigation from '@/components/FooterNavigation.vue'
import MyList from '@/components/myList.vue'
const emit = defineEmits(['view-type']) const emit = defineEmits(['view-type'])
onMounted(() => { onMounted(() => {
emit('view-type', 1) emit('view-type', 1)
}) })
const loading = ref(false)
const finish = ref(false)
const list = reactive([])
const list = reactive([ const onLoad = () => {
{ id: 1, userID: '1111111111', datetime: '7/22/2025 18:20', lastopened: '18:20' }, loading.value = true
{ id: 2, userID: '2222222222', datetime: '7/22/2025 18:20', lastopened: '18:20' }, setTimeout(() => {
{ id: 3, userID: '3333333333', datetime: '7/22/2025 18:20', lastopened: '18:20' }, for (var i = 0; i < 10; i++) {
{ id: 4, userID: '4444444444', datetime: '7/22/2025 18:20', lastopened: '18:20' }, list.push({
{ id: 5, userID: '5555555555', datetime: '7/22/2025 18:20', lastopened: '18:20' }, id: list.length + 1,
{ id: 6, userID: '6666666666', datetime: '7/22/2025 18:20', lastopened: '18:20' }, userID: 10000000 + list.length,
{ id: 7, userID: '7777777777', datetime: '7/22/2025 18:20', lastopened: '18:20' }, datetime: '7/22/2025 18:20',
{ id: 8, userID: '8888888888', datetime: '7/22/2025 18:20', lastopened: '18:20' }, lastopened: '18:20'
{ id: 9, userID: '9999999999', datetime: '7/22/2025 18:20', lastopened: '18:20' }, })
{ id: 10, userID: '0000000000', datetime: '7/22/2025 18:20', lastopened: '18:20' } }
]) loading.value = false
if (list.length >= 50) finish.value = true
}, 1500)
}
const onRetrieveItem = (i: number) => { const onRetrieveItem = (i: number) => {
console.log('检索' + i) console.log('检索' + i)
} }
@@ -34,18 +41,20 @@
<div class="library"> <div class="library">
<div class="title">Library</div> <div class="title">Library</div>
<div class="list"> <div class="list">
<div class="item" v-for="(v, i) in list" :key="v.id"> <my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
<div class="image"> <div class="item" v-for="(v, i) in list" :key="v.id">
<img src="@/assets/images/workshop/posture/posture_1.png" /> <div class="image">
<img src="@/assets/images/workshop/posture/posture_1.png" />
</div>
<div class="content">
<span class="userID">User ID: {{ v.userID }}</span>
<span class="datetime">{{ v.datetime }}</span>
<span class="lastopened">Last opened {{ v.lastopened }}</span>
<button @click="onRetrieveItem(i)">Retrieve</button>
</div>
<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
</div> </div>
<div class="content"> </my-list>
<span class="userID">User ID: {{ v.userID }}</span>
<span class="datetime">{{ v.datetime }}</span>
<span class="lastopened">Last opened {{ v.lastopened }}</span>
<button @click="onRetrieveItem(i)">Retrieve</button>
</div>
<div class="delete" @click="deleteItem(i)"><SvgIcon name="delete2" size="30" /></div>
</div>
</div> </div>
</div> </div>
<footer-navigation is-placeholder /> <footer-navigation is-placeholder />
@@ -88,93 +97,99 @@
} }
> .list { > .list {
flex: 1; flex: 1;
overflow-y: auto; overflow: hidden;
padding: 0 3.8rem;
margin: 0 3rem; margin: 0 3rem;
> .item { > .my-list {
position: relative; padding: 0 3.8rem;
padding: 2.8rem; --my-list-footer-margin: 2rem 0;
width: 100%; > .item {
height: 34.4rem; position: relative;
border-radius: 1.88rem; padding: 2.8rem;
margin-bottom: 7.66rem; width: 100%;
background-color: #f3f3f3; height: 34.4rem;
display: flex; border-radius: 1.88rem;
align-items: center; background-color: #f3f3f3;
> .image {
width: 21.4rem;
height: 100%;
overflow: hidden;
border-radius: 2rem;
background-color: #fff;
> img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
> .content {
margin-left: 5.6rem;
display: flex; display: flex;
flex-direction: column; align-items: center;
height: 90%; margin-top: 7.66rem;
> .userID { &:first-child {
font-family: satoshiRegular; margin-top: 0;
font-weight: 500;
font-size: 3.8rem;
line-height: 89%;
color: #000;
} }
> .datetime { > .image {
margin-top: 1.8rem; width: 21.4rem;
font-family: satoshiRegular; height: 100%;
font-weight: 400; overflow: hidden;
font-size: 3.2rem; border-radius: 2rem;
line-height: 89%; background-color: #fff;
color: #000; > img {
width: 100%;
height: 100%;
object-fit: contain;
}
} }
> .lastopened { > .content {
margin-top: 1rem; margin-left: 5.6rem;
font-family: satoshiRegular; display: flex;
font-weight: 400; flex-direction: column;
font-style: Regular; height: 90%;
font-size: 2.6rem; > .userID {
line-height: 89%; font-family: satoshiRegular;
color: #6f6f6f; font-weight: 500;
font-size: 3.8rem;
line-height: 89%;
color: #000;
}
> .datetime {
margin-top: 1.8rem;
font-family: satoshiRegular;
font-weight: 400;
font-size: 3.2rem;
line-height: 89%;
color: #000;
}
> .lastopened {
margin-top: 1rem;
font-family: satoshiRegular;
font-weight: 400;
font-style: Regular;
font-size: 2.6rem;
line-height: 89%;
color: #6f6f6f;
}
> button {
margin-top: auto;
width: 12.3rem;
height: 3.8rem;
border-radius: 0.5rem;
box-sizing: content-box;
border: 0.193rem solid #000;
background: transparent;
font-family: satoshiRegular;
font-weight: 400;
font-size: 2.576rem;
color: #000;
margin-right: 5rem;
&:active {
opacity: 0.7;
}
}
} }
> button { > .delete {
margin-top: auto; position: absolute;
width: 12.3rem; top: 2.5rem;
height: 3.8rem; right: 2rem;
border-radius: 0.5rem; width: 5.5rem;
box-sizing: content-box; height: 5.5rem;
border: 0.193rem solid #000; border: 0.188rem solid #000;
background: transparent; border-radius: 1.88rem;
font-family: satoshiRegular; display: flex;
font-weight: 400; align-items: center;
font-size: 2.576rem; justify-content: center;
color: #000;
margin-right: 5rem;
&:active { &:active {
opacity: 0.7; opacity: 0.7;
} }
} }
} }
> .delete {
position: absolute;
top: 2.5rem;
right: 2rem;
width: 5.5rem;
height: 5.5rem;
border: 0.188rem solid #000;
border-radius: 1.88rem;
display: flex;
align-items: center;
justify-content: center;
&:active {
opacity: 0.7;
}
}
} }
} }
} }