javascript - 带有可扩展可折叠行html的gridview
问题描述
我需要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>
注意:我已经在堆栈中搜索并验证,无法获得任何解决方案。请帮我解决这个问题..
解决方案
有许多不同的方法可以做到这一点。一种(简单)方法是将初始网格加载到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 行和 4 列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 此解决方案的局限性在于您可以加载两行或所有行。
推荐阅读
- android - 如何将base64字符串发布到服务器?
- javascript - 样式未在组件中更新 - React
- php - CodeIgniter - 配置文件编辑后
- unix - 如何查找托管我的主目录和托管我的主目录的存储系统技术
- django - django inspectdb,检查期间如何写入多个表名
- mysql - 在 MySQL JOIN 中使用 ON 或 USING 或 WHERE 性能更高吗?
- python - Coremltools 转换 CNN + LSTM 问题
- ios - 当 isSecureTextEntry 属性设置为 true 时,UITextField 内容宽度错误
- eclipse - 在 Ubuntu 上从 Eclipse Mars 升级到 Photon 会导致问题
- javascript - Selenium:需要脚本来使用键盘向上或向下移动幻灯片,并且需要单击并按住元素