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

组件"/>

使用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>

总结

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