vue多张图片实现TV端长图浏览组件

vue多张图片实现长图组件

上一篇写了vue中如何实现长图效果，实现的是单张图片，本文讲解多张图片实现长图，直接上代码：

1.布局代码如下：

2.遥控器按键滑动事件和距离计算处理如下：

3.css样式代码：

style scoped>
​
.scroll_long {
  width: 1920px;
  height: 1080px;
  position: absolute;
  background-color: transparent;
  overflow-y: scroll;
}
​
.scroll_long_img {
  width: 1920px;
  height: 1080px;
}
​
.scroll_long_last_img {
  width: 1920px;
  height: 1360px;
}
​
.scroll_long_pic {
  background-color: transparent;
}

​

4.实现效果如下：

​​​​​​​