添加触底加载
This commit is contained in:
李志鹏
@@ -42,6 +42,7 @@
|
||||
font-size: 3rem;
|
||||
color: #000;
|
||||
text-align: center;
|
||||
margin: var(--my-list-footer-margin, 0);
|
||||
> .placeholder {
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
@@ -2,24 +2,31 @@
|
||||
import { ref, reactive, onMounted, inject } from 'vue'
|
||||
import HeaderTitle from '@/components/HeaderTitle.vue'
|
||||
import FooterNavigation from '@/components/FooterNavigation.vue'
|
||||
import MyList from '@/components/myList.vue'
|
||||
const emit = defineEmits(['view-type'])
|
||||
|
||||
onMounted(() => {
|
||||
emit('view-type', 1)
|
||||
})
|
||||
const loading = ref(false)
|
||||
const finish = ref(false)
|
||||
const list = reactive([])
|
||||
|
||||
const list = reactive([
|
||||
{ id: 1, userID: '1111111111', datetime: '7/22/2025 18:20', lastopened: '18:20' },
|
||||
{ id: 2, userID: '2222222222', datetime: '7/22/2025 18:20', lastopened: '18:20' },
|
||||
{ id: 3, userID: '3333333333', datetime: '7/22/2025 18:20', lastopened: '18:20' },
|
||||
{ id: 4, userID: '4444444444', datetime: '7/22/2025 18:20', lastopened: '18:20' },
|
||||
{ id: 5, userID: '5555555555', datetime: '7/22/2025 18:20', lastopened: '18:20' },
|
||||
{ id: 6, userID: '6666666666', datetime: '7/22/2025 18:20', lastopened: '18:20' },
|
||||
{ id: 7, userID: '7777777777', datetime: '7/22/2025 18:20', lastopened: '18:20' },
|
||||
{ id: 8, userID: '8888888888', datetime: '7/22/2025 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' }
|
||||
])
|
||||
const onLoad = () => {
|
||||
loading.value = true
|
||||
setTimeout(() => {
|
||||
for (var i = 0; i < 10; i++) {
|
||||
list.push({
|
||||
id: list.length + 1,
|
||||
userID: 10000000 + list.length,
|
||||
datetime: '7/22/2025 18:20',
|
||||
lastopened: '18:20'
|
||||
})
|
||||
}
|
||||
loading.value = false
|
||||
if (list.length >= 50) finish.value = true
|
||||
}, 1500)
|
||||
}
|
||||
const onRetrieveItem = (i: number) => {
|
||||
console.log('检索' + i)
|
||||
}
|
||||
@@ -34,18 +41,20 @@
|
||||
<div class="library">
|
||||
<div class="title">Library</div>
|
||||
<div class="list">
|
||||
<div class="item" v-for="(v, i) in list" :key="v.id">
|
||||
<div class="image">
|
||||
<img src="@/assets/images/workshop/posture/posture_1.png" />
|
||||
<my-list v-model:loading="loading" v-model:finish="finish" @load="onLoad">
|
||||
<div class="item" v-for="(v, i) in list" :key="v.id">
|
||||
<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 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>
|
||||
</my-list>
|
||||
</div>
|
||||
</div>
|
||||
<footer-navigation is-placeholder />
|
||||
@@ -88,93 +97,99 @@
|
||||
}
|
||||
> .list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 0 3.8rem;
|
||||
overflow: hidden;
|
||||
margin: 0 3rem;
|
||||
> .item {
|
||||
position: relative;
|
||||
padding: 2.8rem;
|
||||
width: 100%;
|
||||
height: 34.4rem;
|
||||
border-radius: 1.88rem;
|
||||
margin-bottom: 7.66rem;
|
||||
background-color: #f3f3f3;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
> .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;
|
||||
> .my-list {
|
||||
padding: 0 3.8rem;
|
||||
--my-list-footer-margin: 2rem 0;
|
||||
> .item {
|
||||
position: relative;
|
||||
padding: 2.8rem;
|
||||
width: 100%;
|
||||
height: 34.4rem;
|
||||
border-radius: 1.88rem;
|
||||
background-color: #f3f3f3;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 90%;
|
||||
> .userID {
|
||||
font-family: satoshiRegular;
|
||||
font-weight: 500;
|
||||
font-size: 3.8rem;
|
||||
line-height: 89%;
|
||||
color: #000;
|
||||
align-items: center;
|
||||
margin-top: 7.66rem;
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
> .datetime {
|
||||
margin-top: 1.8rem;
|
||||
font-family: satoshiRegular;
|
||||
font-weight: 400;
|
||||
font-size: 3.2rem;
|
||||
line-height: 89%;
|
||||
color: #000;
|
||||
> .image {
|
||||
width: 21.4rem;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
border-radius: 2rem;
|
||||
background-color: #fff;
|
||||
> img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
> .lastopened {
|
||||
margin-top: 1rem;
|
||||
font-family: satoshiRegular;
|
||||
font-weight: 400;
|
||||
font-style: Regular;
|
||||
font-size: 2.6rem;
|
||||
line-height: 89%;
|
||||
color: #6f6f6f;
|
||||
> .content {
|
||||
margin-left: 5.6rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 90%;
|
||||
> .userID {
|
||||
font-family: satoshiRegular;
|
||||
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 {
|
||||
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;
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
> .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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user