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

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

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

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

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

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

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

 goodsList: [

                 {

                     id: "1",

                     name: "1"

                 }, {

                     id: "2",

                     name: "2"

                 }, {

                     id: "3",

                     name: "3"

                 }, {

                     id: "4",

                     name: "4"

                 }, {

                     id: "5",

                     name: "5"

                 }, {

                     id: "6",

                     name: "6"

                 }, {

                     id: "7",

                     name: "7"

                 },{

                     id: "8",

                     name: "8"

                 },{

                     id: "9",

                     name: "9"

                 }

 ]

首先写一个方法：getRow

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

let arr = [];

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

let row = Math.ceil(this.goodsList.length / 5);

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

 getRow () {

         let arr = [];

         let row = Math.ceil(this.goodsList.length / 5);

         //  行循环

         for (let i = 0; i < row; i++) {

           //  第i行的商品

           arr[i] = [];

           // modLast：最后一行的商品个数

           let modLast = this.goodsList.length % 5 === 0 ? 5 : this.goodsList.length % 5;

           // lastRow：判断当前循环是不是最后一行，是就让内层循环最后一行的商品个数，不是则默认5个

           let lastRow = i === (row - 1) ? modLast : 5;

           //  列循环

           for (let j = 0; j < lastRow; j++) {

             arr[i][j] = this.goodsList[5 * i + j];

           }

         }

         //  最后得到arr数组，将数组赋值给一个变量

         this.branchData = arr;

 }

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

 mounted () {

   this.getRow();

 }

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

 <div class="row" v-for="rows in branchData">

         <div class="card" v-for="cols in rows">

              <div class="name">{{cols.name}}</div>

         </div>

 </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：

 <script>

 export default {

     name: "Branch",

     data() {

         return {

             goodsList: [

                 {

                     id: "1",

                     name: "1"

                 }, {

                     id: "2",

                     name: "2"

                 }, {

                     id: "3",

                     name: "3"

                 }, {

                     id: "4",

                     name: "4"

                 }, {

                     id: "5",

                     name: "5"

                 }, {

                     id: "6",

                     name: "6"

                 }, {

                     id: "7",

                     name: "7"

                 },{

                     id: "8",

                     name: "8"

                 },{

                     id: "9",

                     name: "9"

                 }

             ],

             branchData: []

         }

     },

     mounted () {

         this.getRow();

     },

     methods: {

       getRow () {

         let arr = [];

         let row = Math.ceil(this.goodsList.length / 5);

         for (let i = 0; i < row; i++) {

           arr[i] = [];

           let modLast = this.goodsList.length % 5 === 0 ? 5 : this.goodsList.length % 5;

           let lastRow = i === (row - 1) ? modLast : 5;

           for (let j = 0; j < lastRow; j++) {

                  arr[i][j] = this.goodsList[5 * i + j];

           }

         }

         this.branchData = arr;

       }

    }

 }

 </script>

[vue学习] 卡片展示分行功能简单实现的相关教程结束。