关于vue项目中js实现轮播功能。

关于vue项目中js实现轮播功能。
由于项目要求，ui组件库实现不好要的效果，所以，手动写了一个。
先看效果吧

这里左右箭头是可以点击滑动的，类似轮播样式，这里是由于后台返回数据list，一次加载3条
实现方法主要下面介绍
首先是静态页面

    

        
员工历程
     左箭头   

        

            

                
{{item.createTime}}
                
 
                

                    
{{item.courseTitle}}
                    

                
                
            
        
   右箭头      
    

在data里面定义下

  data() {
            return {
                infoH:'',
                processDataLen:0,
                processListWidth:'100%',
                processItemW:'',
                itemWidth:'',
                transPx: '0',
                transpage:0,
                prevActive:false,
                nextActive:false,     
            };
        },

在写实现方式，methods

            getTransWidth(processData){

                this.processDataLen = processData.length;
                if(this.processDataLen > 3){
                    this.nextActive = true;
                }
                let processBoxW = this.$refs.processBox.offsetWidth;
                if(this.processDataLen > 3){
                    this.itemWidth = Math.floor(processBoxW/3 - 8)
                    this.processItemW = this.itemWidth  + 'px';
                    this.processListWidth = (this.processDataLen * (this.itemWidth + 20)) + 'px';
                }

            },
            transMove(param){
                let processListBox = this.$refs.proList;
               
                if(param == 'prev'){
                    if(this.transpage < 1){
                        this.prevActive = false;
                        processListBox.style.transform = `translateX(0px)`;
                        processListBox.style.transitionDuration = '300ms'; 
                    }else{
                        if(!(this.transpage >= this.processDataLen-2)){
                            this.nextActive = true;
                        }
                        this.transpage--; 
                        this.transAction(this.itemWidth,processListBox);                       
                    }
                }
                if(param == 'next'){
                    if(!(this.transpage >= this.processDataLen-3)){

                        this.nextActive = true;
                        if(this.transpage > -1){
                            this.prevActive = true;
                        }

                        this.transpage++;
                        this.transAction(this.itemWidth,processListBox);  
                                                 
                    }else{
                        this.nextActive = false;
                    }
                } 
            },
            transAction(itemWidth,contentBox){
                let transTotalW = -(this.transpage * itemWidth);
                contentBox.style.transform = `translateX(${transTotalW}px)`;
                contentBox.style.transitionDuration = '300ms';                 
            }

样式

这样就好了，样式需要自己调。