vue应用flex布局做自调节宽度到5的倍的div通配

原创
小哥 3年前 (2022-11-10) 阅读数 44 #大杂烩

我的实施已经完成。html中双层for循环做的

首先让我们处理数组数据,因为我们都是。5这些元素分为一个div

查看数据格式:

 data() {
    return {
      examList: [
        {
          title: 正题,
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: 正题1,
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11],
        },
        {
          title: 正题2,
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: 正题3,
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: 正题4,
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        },
        {
          title: 正题5,
          listData: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
        }
      ]

    };
  },

.....
splitItemEveryFive(exam) { return Math.floor(exam.listData.length / 5) + 1; },

上面的代码我们首先把他的父亲放在上面。div写出来了, 例如,我们有13元素。然后我们横穿4次父亲div,然后是subdiv中 根据较低值循环5次

子div中的处理

  
    afterSplitList(exam, start) {
      return exam.listData.slice(start * SPLIT_NUM, start * SPLIT_NUM + SPLIT_NUM);
    },

完整代码:



效果如图所示:

版权声明

所有资源都来源于爬虫采集,如有侵权请联系我们,我们将立即删除

热门