Question

我需要gridview，其中包含'n'行，每行将显示4列/项。我想只使用Html / Javascript / Vuejs模板。

我想要实现以下视图：在上图中，我们有“查看全部”按钮，可以说我们有32个数据集，网格应该有8行，每行有4个项目/列。最初我需要只有两行（显示8项）和“查看全部”，当我点击按钮时，它应该展开并显示所有行和项目。使用'查看更少'文本。当我再次点击时，它应该折叠，并且应该只显示2行和8个项目。

<template>
  <div>
<list>
  <cell style="flex-direction:row; align-items:center ;" v-for="(rowdata,index) in griddata" :key="index" >
    <div v-for="(rowitem, i) in rowdata" style="flex:1;flex-direction:column; backgroundColor:blue;margin:10px;height:100px; align-items:center;" :key="i">
        <image class="item-icon" src="https://gw.alicdn.com/tfs/TB1788ygMMPMeJjy1XdXXasrXXa-1919-1520.jpg"></image>
        <text style="color:white;justify-content:center;align-items:center;backgroundColor:red;flex:1; text-align:center;">{{rowitem}}</text>
    </div>
  </cell>
</list>
<text class="view-all-container" v-if="viewText" >{{viewText}}</text>
 </div>
</template>

<script>
  export default {
    props: {
      data: Object,
    },
  data() {
    return {
         isOpen: false,
         viewText: 'View All',
         borderRight: 'item-border-right',
         appearFlag: [],
         griddata:[]
    };
   },

   created() {
      for(var i =0;i<5;i++){
            var rowdata = []
            rowdata.push("1")
            rowdata.push("2")
            rowdata.push("3")
            this.griddata.push(rowdata)
         }
    },
    }
  </script>

   <style scoped lang="sass?outputStyle=expanded">

    .container {
        background-color: #fff;
        flex-direction: column;
        align-items: center;
        margin-bottom: 20px;
     }
    .icon-row {
        width: 750px;
        flex-direction: row;
        align-items: flex-start;
     }
    .icon {
         width: 188px;
         height: 168px;
         padding-top: 30px;
         flex-direction: column;
         justify-content: center;
         align-items: center;
         border-bottom-style: solid;
         border-bottom-color: #ebebeb;
         border-bottom-width: 1px;
       }
      .item-border-right {
            border-right-style: solid;
            border-right-color: #ebebeb;
            border-right-width: 1px;
       }
       .item-icon {
            width: 54px;
            height: 54px;
            margin-bottom: 15px;
        }
        .item-text {
            padding-left: 14px;
            padding-right: 14px;
            font-size: 22px;
            color: #666;
            text-align: center;
            lines: 2;
            height: 64px;
            text-overflow: ellipsis;
          }
         .view-all-container {
              width: 750px;
               margin-top: 30px;
               margin-bottom: 30px;
                text-align: center;
              font-size: 26px;
                font-weight: 500;
             color: #ef4e28;
   }
   </style>

注意：我已经用Google搜索并验证了堆栈，无法获得任何解决方案。 Plz帮我解决了这个问题..

Answer 1

有很多不同的方法可以做到这一点。一种（简单）方法是在created挂钩中加载初始网格，如下所示：

 this.initialGrid = createGrid(2, 4)

createGrid定义为：

const createGrid = (rows, cols) => {
 const grid = []
 for (let i = 0; i < rows; i++) {
   grid[i] = []
   for (let j = 0; j < cols; j++) {
     grid[i][j] = "some/image" // could store respective image paths in an array and push them into the grid
   }
 }
 return grid
}

如果您初始化createGrid，这将为您提供包含四列的2行。然后在data挂钩中，您可以将具有所需尺寸的网格存储为“原始网格”。模板可以简单如下：

<div id="grid">
 <div class="flex-container"
      v-for="rows in showGrid">
 <!-- just a placeholder, you'd likely want an img tag, etc -->
   <div v-for="cols in rows">
      {{ cols }}
   </div>
 </div>
 <button
      v-show="!toggleLoadButton"
      @click="toggleLoadButton = true"
 >
 show more
 </button>
 <button
      v-show="toggleLoadButton"
      @click="toggleLoadButton = false"
 >
 show less
 </button>
</div>

以下是一个示例：https://codepen.io/anon/pen/VxQeRV?editors=1010 此解决方案仅限于加载两行或所有行。

gridview with expandable collapsible rows html

1 个答案: