[vue学习] 卡片展示分行功能简单实现

如图所示，实现简单的卡片展示分行功能。

分行功能较多地用于展示商品、相册等，本人在学习的过程中也是常常需要用到这个功能；虽然说现在有很多插件都能实现这个功能，但是自己写出来，能够理解原理，相信能够进步不少。

首先看看这个简单的原理分析：

最核心的就是多维数组，而且是不规则数组。将全部卡片全部分解为多维数组，页面渲染这个不规则多维数组，最终能达到这样的效果。

自己写一个商品列表goodsList，它里面的数据如下：

有9个商品，然后在前端渲染时将这十个商品分行，五个一行

 1 goodsList: [
 2                 {
 3                     id: "1",
 4                     name: "1"
 5                 }, {
 6                     id: "2",
 7                     name: "2"
 8                 }, {
 9                     id: "3",
10                     name: "3"
11                 }, {
12                     id: "4",
13                     name: "4"
14                 }, {
15                     id: "5",
16                     name: "5"
17                 }, {
18                     id: "6",
19                     name: "6"
20                 }, {
21                     id: "7",
22                     name: "7"
23                 },{
24                     id: "8",
25                     name: "8"
26                 },{
27                     id: "9",
28                     name: "9"
29                 }
30 ]

首先写一个方法：getRow

声明一个数组并赋值为空，用于存储将多维数组。

let arr = [];
确定行数，使用Math.ceil方法向上取舍（如果有7个商品，一行 5 个，7 / 5 = 1.4，向上取舍得2行）

let row = Math.ceil(this.goodsList.length / 5);
因为我们没有理由让商品刚好放满每一行，有时候我们发现最后一行是不够5个商品，所以使用不规则数组。使用嵌套循环，将全部商品分割成多个长度上限为5的数组。第一层循环是行数循环，第二层循环是列循环

 1 getRow () {
 2         let arr = [];
 3         let row = Math.ceil(this.goodsList.length / 5);
 4         //  行循环
 5         for (let i = 0; i < row; i++) {
 6           //  第i行的商品
 7           arr[i] = [];
 8           // modLast：最后一行的商品个数
 9           let modLast = this.goodsList.length % 5 === 0 ? 5 : this.goodsList.length % 5;
10           // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个
11           let lastRow = i === (row - 1) ? modLast : 5;
12           //  列循环
13           for (let j = 0; j < lastRow; j++) {
14             arr[i][j] = this.goodsList[5 * i + j];
15           }
16         }
17     
18         //  最后得到arr数组，将数组赋值给一个变量
19         this.branchData = arr;
20 }

根据需求触发 getRow() 执行，我这里是通过Vue生命周期中的mounted，当页面被挂载后执行函数。

1 mounted () {
2   this.getRow();
3 }

最后将分割后的多维数组进行前端遍历渲染

1 <div class="row" v-for="rows in branchData">
2         <div class="card" v-for="cols in rows">
3              <div class="name">{{cols.name}}</div>
4         </div>
5 </div>

一个简单的分行功能在此实现！欢迎指正！谢谢。

附录：

前端代码：

<template>
    <div class="branch">
        <div class="row" v-for="rows in branchData">
            <div class="card" v-for="cols in rows">
                <div class="name">{{cols.name}}</div>
            </div>
        </div>
    </div>
</template>

样式：

<style scoped>
    .branch {
      width: 800px;
      margin: 0 auto;
    }

    .card {
      height: 100px;
      width: 100px;
      margin: 15px;
      background-color: turquoise;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .row {
      display: flex;
      flex-direction: row;
    }
</style>

JS：

 1 <script>
 2 export default {
 3     name: "Branch",
 4     data() {
 5         return {
 6             goodsList: [
 7                 {
 8                     id: "1",
 9                     name: "1"
10                 }, {
11                     id: "2",
12                     name: "2"
13                 }, {
14                     id: "3",
15                     name: "3"
16                 }, {
17                     id: "4",
18                     name: "4"
19                 }, {
20                     id: "5",
21                     name: "5"
22                 }, {
23                     id: "6",
24                     name: "6"
25                 }, {
26                     id: "7",
27                     name: "7"
28                 },{
29                     id: "8",
30                     name: "8"
31                 },{
32                     id: "9",
33                     name: "9"
34                 }
35             ],
36             branchData: []
37         }
38     },
39     mounted () {
40         this.getRow();
41     },
42     methods: {
43       getRow () {
44         let arr = [];
45         let row = Math.ceil(this.goodsList.length / 5);
46         for (let i = 0; i < row; i++) {
47           arr[i] = [];
48           let modLast = this.goodsList.length % 5 === 0 ? 5 : this.goodsList.length % 5;
49           let lastRow = i === (row - 1) ? modLast : 5;
50           for (let j = 0; j < lastRow; j++) {
51                  arr[i][j] = this.goodsList[5 * i + j];
52           }
53         }
54         this.branchData = arr;
55       }
56    }
57 }
58 </script>

[vue学习] 卡片展示分行功能简单实现

猜你喜欢