关于使用vueSeamlessScroll插件实现一行多个item并行,最后垂直滚动的效果

  最近在做大屏展示的项目,要求展示列表要能自动滚动,用惯了第三方插件,于是我选择了用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里面使用就好

在这里插入图片描述

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值