页面实现点击左右按钮图片往左右滑动的展示的效果

实现效果如下：
页面代码
左边按钮代码块

<span class="left_btn btn" v-if="translateIndex > 0" @click="scrollToFn(list, false)"></span>

右边按钮代码块

<span class="right_btn btn" v-if="list && list.length>8 && translateIndex < list.length-8" @click="scrollToFn(list, true)"></span>

滚动列表代码块

 <div class="list_box"  :style="{ transform: `translateX(${translateX}px)` }"></div>

css加效果代码块，慢慢滑动过的效果

 -webkit-transition: transform 0.3s linear;
 transition: transform 0.3s linear;

数据源代码块

data(){
	return:{
		list:[],  //盒子个数
		translateIndex:0, //位移盒子的个数
		translateX:0, //盒子位移的像素
	}
}

方法体中加入点击事件滚动的代码

scrollToFn(item, status) {
      if(status){
      	//172指的是单个盒子的宽度
        if(this.translateIndex < item.length - 8){
          this.translateIndex += 1
          this.translateX=-(this.translateIndex * 172)
        }
      }else{
        if (this.translateIndex > 0) {
          this.translateIndex -= 1
          this.translateX=-(this.translateIndex * 172)
        }
      }
    },