vue实现图片滚动（类似走马灯效果）

Myth丶恋晨 2022-06-14 02:16 640阅读 0赞

上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了slot进行封装。

父：

<template>
       <div id="app">
          <er-carousel-index :typeNumber=2 :pageNumber=3  :timeSpace=2 :duration=2 :isOrNotCircle="true"  url="/src/js/index.json" :isOrNotButton=false>
                <template scope="props">-----使用子组件传过来的值，封装slot
                    <div class="articleList-box-photo ">
                        <div class="tu imageEffectsAnimate imageEffects_Magnifier">
                            <a>
                                <img class="minMax" :src="props.item.img">
                            </a>
                        </div>
                    </div>
                    <div class="articleList-box-title">
                        <div class="title">
                            <a class="textleft">{
       {props.item.title}}</a>
                        </div>
                    </div>
                </template>
            </er-carousel-index>
       </div>
    </template>
    <script>
       import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue'
       export default {
          name: 'app',
          data() {
                }
                   },
          components: {
             ErCarouselIndex//一定要进行组件声明，不然不能引用子组件
          }
       }
    </script>

子组件：

<template>
        <div tag="div" class="articleList articleListMod-3 er-carouseindex" name="slide-fade" id="articleList" :style="{height:imgHeight+'px'}" >
            <span id="btn1" class="er-carouseindex-left" @mousedown="imgMove('mouseLeft')" @mouseup="cancelMove('left')" v-show="isOrNotButton"></span>
            <span id="btn2" class="er-carouseindex-right"  @mousedown="imgMove('mouseRight')" @mouseup="cancelMove('right')" v-show="isOrNotButton"></span>
            <div id="packageAll" class="er-carouseindex-con" @mouseover="clearAuto" @mouseout="slideAuto">
                <div class="er-carouseindex-bar" v-show="isOrNotCircle">
                    <div v-for="(item,dex) in imgList" @mouseup="clearAuto" class="er-carouseindex-circle" @click="circleClick(dex)" :class="{circleSelected:dex===indexCircle}">
                    </div>
                </div>
                <div id="imageAll" class="er-carouseindex-item" :style="{transform:translateX,transition:transFlag?transitionTime:''}">
                    <div class="articleList-box er-carouseindex-box" v-for="(list,index) in imgLisShow" :style="{width:imgWidth+'%'}"
                         style="max-height:50%;">
                        <slot :item="list"></slot>
                    </div>
                </div>
            </div>
        </div>
    </template>
    <script>
        export default
        {
            name: "ErCarouselIndex",
            data(){
                return {
                    imgList: [],//请求接口数据
                    imgLisShow: [],//图片滚动数据，包括左中右三种
                    timer: null,//自动循环滚动时的间隔时间
                    timeout:null,//长按时的图片滚动间隔时间
                    index:0,//图片索引
                    translateXnum:0,//图片滚动时的偏移量
                    translateX:"",//生成图片偏移时的表达式
                    imgWidth:"",//图片所占宽度
                    timeDown:"",//鼠标刚按下时的时间
                    timeup:"",//鼠标松开时的时间
                    clickSpace:"",//鼠标按下松开的时间间隙
                    transFlag:true,//是否匀速滚动,
                    transitionTime:"",
                    indexCircle:0//小圆圈滚动索引
                }
            },
            props:{
                duration:0,//图片延时滚动
                typeNumber:0, //每次滚动几张
                timeSpace:0,  //图片滚动时间间隔
                url:String,//请求接口地址
                pageNumber:0,//当前页面显示几张图片
                isOrNotButton:true,//是否显示左右按钮
                isOrNotCircle:true,//是否显示小圆圈
                imgHeight:""//图片滚动显示高度
            },
            watch:{
                index:{
                    handler(){
                        var _this=this;
                       if(Math.abs(this.index)==this.imgList.length){
                           this.indexCircle=0;
                          setTimeout(function(){
                              _this.reset();
                          },_this.duration*1000*0.98);
                       }else{
                           this.indexCircle=this.index;
                       }
                        this.calcXnum();
                     }
                },
                translateXnum:{
                    handler(){
                        this.translateX="translateX("+this.translateXnum+"%)";
                    }
                }
            },
            methods:{
                //页面初始化复赋值
                imgView:function() {
                    var _this = this;
                    _this.$http.get(_this.url).then(function (res) {
                        _this.imgList = res.data.imgList;
                        for(var i=0;i<3;i++){
                            _this.imgList.forEach(function (item, index) {
                                _this.imgLisShow.push(item);
    
                            });
                        }
                        _this.reset();
                        _this.slideAuto();
                        _this.imgWidth=(100/_this.pageNumber)-1;
                        _this.transitionTime="all "+_this.duration*0.98+"s linear";
                        console.log(_this.transitionTime);
                    });
                },
                //图片滚动方法(长按)
                imgMove:function(direct){
                    var _this = this;
                    _this.timeDown=new Date();//记录按下的时间
                    _this.timeout = setInterval(function() {
                        if(direct=="mouseLeft") {
                            _this.leftMove();
                        }else{
                            _this.rightMove();
                        }
                    },300);
                },
                //鼠标送开时执行的方法
                cancelMove:function(direct){
                    var _this = this;
                    _this.clearAuto();
                    this.timeup=new Date();//记录松开的时间
                    this.clickSpace=this.timeup.getTime() - this.timeDown.getTime();
                    //时间间隔小于500毫秒为点击，反之为长按
                    if(this.clickSpace<500){
                        for(var i=0;i<_this.typeNumber;i++){
                            if(direct=="left"){
                                _this.leftMove();
                            }else{
                                _this.rightMove();
                            }
                        }
                    }
                    if (this.timeout) {
                        clearInterval(this.timeout);
                        this.timeout = null;
                    }
                },
                //向左移动
                leftMove:function(){
                    this.index--;
                    this.transFlag=true;
                },
                //向右移动
                rightMove:function(){
                    this.transFlag=true;
                    this.index++;
                },
                slideAuto:function () {
                    var _this = this;
                    _this.timer = setTimeout(function () {
                        if(Math.abs(_this.index)!==_this.imgList.length){
                            _this.rightMove();
                            _this.slideAuto();
                        }
                    }, _this.timeSpace * 1000);
                },
                clearAuto:function () {
                    console.log("停止");
                    if (this.timer) {
                        clearInterval(this.timer);
                        this.timer = null;
                    }
                },
                //重置
                reset:function(){
                    this.index=0;
                    this.transFlag=false;
                    this.calcXnum();
                },
                calcXnum:function(){
                    var _this=this;
                    this.translateXnum=-(this.index+this.imgList.length)*(100/this.pageNumber);
                },
                //点击圆圈跳转图片
                circleClick:function(dex){
                    this.index=dex;
                    this.clearAuto();
                }
            },
            mounted()
            {
                this.$nextTick(function () {
                    this.imgView();
                });
            }
        }
    </script> 
     
    这个组件相对来说功能比较完整，用户可以通过传参来控制当前页面需要显示几张图片，图片滚动时间间隔，是否显示左右点击按钮等等，详细参数可以查看props,里面都有注释。