vue中vue-seamless-scroll配合new Image() 实现图片无限滚动

338 阅读1分钟

后台返回的url图片 前端实现图片无限横向滚动

1 安装 vue-seamless-scroll是vue中的无限滚动插件 安装教程 blog.csdn.net/qq_37899792…

2在使用 vue-seamless-scroll 我们可以知道 这个无限滚动无非就是定义一个固定显示内容的窗口 然后设置滚动的内容 但是必须要滚动的内容必须要有一个宽度 因为后台返回的图片是不固定的 所以宽度也就一定要是活的
这里就要配合new Image()对象来获取到后台url图片的总宽度

let sum = 0 //定义图片宽度总和

后台返回的url图片数组.forEach(function(e){ let img = new Image(); img.src = e sum + = img.width }) this.owidth = ' width: ' + sum + 'px' //style样式 sum为获取图片的总宽度

给要滚动的内容加上 :style="owidth" 样式