Vue实现图片左右滚动

npm安装

npm install vue-seamless-scroll --save

HTML

<div class="index-roll">
	<vue-seamless-scroll :data="partnerList" :class-option="optionLeft">
		<ul v-bind:style="{ 'width': (partnerList.length * 360) + 'px' }">
			<li v-for="(item, index) in partnerList" :key="index" @click="viewWebPartner(item.url)">
	            <img :src="item.imgUrl">
			li>
		ul>
	vue-seamless-scroll>
div>

JS

export default {
	data () {
	  	return {
	  		partnerList: [],
		}
	},
	computed: {
	    optionLeft () {
	      return {
	        step: 0.5, // 数值越大速度滚动越快
	        limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length
	        hoverStop: true, // 是否开启鼠标悬停stop
	        direction: 2, // 0向下 1向上 2向左 3向右
	        openWatch: true, // 开启数据实时监控刷新dom
	        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
	        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
	        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
	      }
	    }
  	},
	methods: {
		getPartnerList () {
	      this.$http.get('/cms/cmsurl/getListByModuleType', {
	        params: {
	          moduleType: '1462717761928450049'
	        }
	      }).then(({ data: res }) => {
	        if (res.code !== 0) {
	          this.partnerList = []
	          this.total = 0
	          return this.$message.error(res.msg)
	        }
	        this.partnerList = res.data
	      }).catch(() => {
	      })
	    }
	}
}

SCSS

.index-roll {
    overflow: hidden;
    height: 130px;
    width: 1140px;
    margin: 0 auto 60px auto;
    ul {
        display: flex;
        li {
            width: 360px;
            margin: 0 10px;
            padding: 30px 0;
            background-color: #f8f8f8;
            border-radius: 4px;
        }
        li:hover{
            cursor: pointer;
            border-bottom: 2px solid #43aaed;
        }
        img{
            width: auto;
            height: 60px;
            display: block;
            margin: 0 auto;
        }
    }
}