From aab8119ad66583d65d517e2eb8e574b8794180c9 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 16 Jan 2022 20:58:19 +0800
Subject: [PATCH] 无限列表滚动
---
src/components/mini/box8-panal.vue | 96 +++++++++++++++++++-----------------------------
1 files changed, 38 insertions(+), 58 deletions(-)
diff --git a/src/components/mini/box8-panal.vue b/src/components/mini/box8-panal.vue
index 0de9b25..cb0652a 100644
--- a/src/components/mini/box8-panal.vue
+++ b/src/components/mini/box8-panal.vue
@@ -1,65 +1,28 @@
<template>
- <div>
- <div class="article-meta ">
+ <div class="holdHeight">
+ <a-row type="flex" justify="center" >
+ <a-col v-for="temp in [1,2,1,1,1,1,1]">
+ <div class="myCard" style="height: 200px;width: 220px; border-radius: 20px;">
+ <a-card :hoverable="true" size="small">
+ <template slot="cover">
+ <img class="myCardCover" alt="example" src="../../assets/mowenwei.jpg" />
+ </template>
- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
- <legend>卡片面板</legend>
- </fieldset>
+ <template slot="actions" class="ant-card-actions">
+ <a-icon key="arrowDown" type="arrow-down" />
+ <a-icon key="edit" type="edit" />
+ <a-icon key="ellipsis" type="ellipsis" />
+ </template>
- <div class="layui-bg-gray" style="padding: 30px;">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 卡片式面板面板通常用于非白色背景色的主体内<br>
- 从而映衬出边框投影
- </div>
- </div>
- </div>
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 结合 layui 的栅格系统<br>
- 轻松实现响应式布局
- </div>
- </div>
- </div>
+ <a-card-meta title="这世界那么多人" description="吉他谱 莫文蔚">
+ </a-card-meta>
+ </a-card>
</div>
- </div>
+ </a-col>
- </div>
- <div class="blog-cell">
-
- <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
- <legend>卡片面板</legend>
- </fieldset>
-
- <div class="layui-bg-gray" style="padding: 30px;">
- <div class="layui-row layui-col-space15">
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 卡片式面板面板通常用于非白色背景色的主体内<br>
- 从而映衬出边框投影
- </div>
- </div>
- </div>
- <div class="layui-col-md6">
- <div class="layui-card">
- <div class="layui-card-header">卡片面板</div>
- <div class="layui-card-body">
- 结合 layui 的栅格系统<br>
- 轻松实现响应式布局
- </div>
- </div>
- </div>
- </div>
- </div>
-
- </div>
+ </a-row>
+ <a-pagination :showQuickJumper="true" :size="size" :default-current="current" :defaultPageSize="pageSize"
+ :total="total" />
</div>
@@ -70,7 +33,13 @@
name: "box",
data() {
return {
-
+ data: [],
+ loading: false,
+ busy: false,
+ size: "small",
+ total: 50,
+ pageSize: 10,
+ current: 4,
}
}
}
@@ -79,5 +48,16 @@
</script>
<style lang="less">
+ .holdHeight {
+ // background-color: beige;
+
+ }
+ .myCard {
+ padding: 10px 10px;
+ }
+
+ .myCardCover {
+ object-fit: scale-down
+ }
</style>
--
Gitblit v1.9.1