gridview с расширяемыми складными строками html - PullRequest
Новая
       6

gridview с расширяемыми складными строками html

0 голосов
/ 09 мая 2018

Мне нужен gridview, который будет иметь n строк, и каждая строка будет иметь 4 столбца / элемента для отображения. Я хочу добиться использования только Html / Javascript / Vuejs шаблона.

Я хочу получить следующее представление: enter image description here На изображении выше у нас есть кнопка «Просмотреть все». Допустим, у нас есть 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>

Примечание: я гуглил и проверял в стеке, не смог найти никакого решения. Пожалуйста, помогите мне из этого ..

1 Ответ

0 голосов
/ 09 мая 2018

Есть много разных способов сделать это. Один (простой) способ - загрузить исходную сетку в хук 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
}

Это даст вам 2 строки с четырьмя столбцами, если вы инициализировали createGrid как таковой. Затем в хуке 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 Это решение ограничено тем, что вы загружаете либо две строки, либо все строки.

...