最近在做大屏展示的项目,要求展示列表要能自动滚动,用惯了第三方插件,于是我选择了用vueSeamlessScroll,大概像这样
这样一行一个item对于vueSeamlessScroll没有什么问题
但接下来我就遇到一个问题了
这种一行多个item的,我翻遍了vueSeamlessScroll的官网也没有看到任何介绍一行多个的相关配置
但后来转换了一下思路,把一行多个再打包成一个item,这样每一行就是一个item了。
为了方便,我称每一行的item为item1,一个个item称为item2。
这样只需要将item1的List交给vueSeamlessScroll就好了(配套需要准备两个东西,第一个是每一个item1的样式,第二个是准备数据结构)
item的样式大概如下,给item1和item2固定的高和宽,并设置item1为flex
数据结构大概长这样:item1List = [item2List, item2List, item2List, …]
let item2List = [
{projectName: '项目1', personNumber: 230},
{projectName: '项目2', personNumber: 240},
{projectName: '项目3', personNumber: 250},
{projectName: '项目4', personNumber: 230},
{projectName: '项目5', personNumber: 220},
...
]
// 每两个item2打包成一个新的List,并push到item1List中
let item1List = [
[{projectName: '项目1', personNumber: 230},{projectName: '项目2', personNumber: 240}],
[{projectName: '项目3', personNumber: 250},{projectName: '项目4', personNumber: 230}],
[{projectName: '项目5', personNumber: 230},{projectName: '项目6', personNumber: 240}],
...
]
实现这个数据结构的代码如下:
getItem1List(orgArray) {
let resultArr = [];
for (let i = 0; i < orgArray.length; i += 2) {
resultArr.push([orgArray[i], orgArray[i + 1]]);
}
this.item1List = resultArr;
},
最后在vueSeamlessScroll里面使用就好