使用vue 写 轮播文字通告组件

使用vue 写 轮播文字通告组件

我们在使用 电商网站 经常会看到 轮播文字的通告。今天我记录一下我使用vue2.0版本来写这个轮播组件，先贴一波代码

style

技术栈 less

.scroll{
    height: 32px;
    line-height: 28px;
    padding: 4px 0;
    white-space: nowrap;
    .content{
        width: 100%;
        word-wrap: normal;
        margin-right: 140px;
    }
    .title{
        color: #ad6f0c;
        font-weight: bold;
    }
    .text {
        color: #805518;
    }
}
.textScroll{
    background-color: #f7f7f7;
    border-bottom: 4px solid #999;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
}

html 代码

    <div class="textScroll" @mousemove="pauseAn" @mouseout="startAn" >
    <div class="scroll" :style="{marginLeft: '-' + marginLeft + 'px' }"> 
        <span @click="itemClick(item,$event)" v-for="(item,index) in datas" :key="index" class="content">
            <span class="title">
            【特推公告：{{item.title}}】
            </span>
            <span class="text">{{item.text}}</span>
        </span> 
    </div>
</div>

js 代码

<script>

export default {
name:'textScroll',
data(){
    return {
        datas,
        marginLeft: 0,
        prevLeft: 0,
        an: '',
        place: '',
    }
},
props:{
    data: {
        type: Array,
    },
    time: {
        type: Number,
        default: 100,
    },
    placement: {
        type: String,
        default: 'bottom'
    }
},
created(){
    switch( this.placement ){ /** 此功能可自己扩展，展示方式，此代码中未完成扩展 **/
        case 'top': this.place = 'top';break;
        case 'bottom': this.place = 'bottom';break;
        default : this.place = 'bottom';break;
    }
},
mounted(){

    this.$nextTick (function(){
        this.startAn();
    })

},
beforeDestroy(){
    this.stopAn();
},
watch:{

},
methods:{
    startAn: function(){ // 开始 
        let _this = this;
        let width = document.querySelector('.scroll').offsetWidth;
        this.an = setInterval( function() {
            if (_this.marginLeft > width) {
                _this.marginLeft = 0;
            }
            _this.marginLeft += 2;
        } , _this.time);
    },
    stopAn: function(){ // 停止
        this.prevLeft = this.marginLeft;
        this.marginLeft = 0;
        clearInterval(this.an);
        this.$emit('on-stop-An');
    },
    pauseAn: function(){ // 暂停动画
        clearInterval(this.an);
    },
    itemClick: function( item, e ) {
        this.$emit('on-item-click',item );
    }

}

}
</script>

总结

到这里这个代码基本上是能用的。