[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>