update:24.7.5.9.24
This commit is contained in:
1 parent
c6bdfe6bc5
commit
0a56f8b5d5
2 files changed
+53
-2
No files matched your search
@@ -9,3 +9,50 @@
|
|||||||
```ts
|
```ts
|
||||||
import TabList from '@/components/tabList.vue'
|
import TabList from '@/components/tabList.vue'
|
||||||
```
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
* ScrollLoad用法
|
||||||
|
```html
|
||||||
|
<ScrollLoad
|
||||||
|
ref="scrollLoadRef"
|
||||||
|
v-bind="scrollLoadProps"
|
||||||
|
@fetchEnd="handleScrollDataFetchEnd">
|
||||||
|
<!-- 这里直接使用elementplus的组件构建骨架屏 -->
|
||||||
|
<template #skeleton>
|
||||||
|
<el-skeleton
|
||||||
|
:count="11"
|
||||||
|
:throttle="500"
|
||||||
|
animated
|
||||||
|
class="result-skeleton">
|
||||||
|
<template #template>
|
||||||
|
<el-skeleton-item
|
||||||
|
variant="rect"
|
||||||
|
class="result-item-skeleton result-item"></el-skeleton-item>
|
||||||
|
</template>
|
||||||
|
</el-skeleton>
|
||||||
|
</template>
|
||||||
|
<!-- 这里为懒加载列表的内容,此处data未使用 -->
|
||||||
|
<template #default={data}>
|
||||||
|
<replayCard
|
||||||
|
v-for="data of testData.testData"
|
||||||
|
:key="data.title"
|
||||||
|
:cardData="data"></replayCard>
|
||||||
|
</template>
|
||||||
|
<!-- 无数据时显示 -->
|
||||||
|
<template #no-data>
|
||||||
|
<RemindEmptyResource class="result-no-data"></RemindEmptyResource>
|
||||||
|
</template>
|
||||||
|
</ScrollLoad>
|
||||||
|
```
|
||||||
|
其中scrollLoadProps的参数为如下
|
||||||
|
```ts
|
||||||
|
const scrollLoadProps = computed(() => {
|
||||||
|
return {
|
||||||
|
apiConf: api.something,
|
||||||
|
matchData: '@data.items@',
|
||||||
|
params: {}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
```
|
||||||
|
具体为到底时使用传入的api请求一组数据,然后传回的data可以通过fetchEnd或是default插槽进行处理
|
||||||
+6
-2
@@ -1,8 +1,12 @@
|
|||||||
## 记录每日目标
|
## 记录每日目标
|
||||||
|
|
||||||
*
|
# 2024.7.4
|
||||||
|
* 完成QRCode组件
|
||||||
|
* 完成api接入
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
||||||
# 2024.7.4
|
# 2024.7.4
|
||||||
* 完成作品回放页面 (X)
|
* 完成作品回放页面 (80%)(QRCode未解决)
|
||||||
---
|
---
|
||||||
Reference in new issue
Block a user