本文实例为大家分享了vue实现公告消息横向无缝循环滚动的具体代码，供大家参考，具体内容如下
该组件实现了公告消息的无缝横向滚动。我命名为marqueex.vue文件，感谢原来博主的分享，我自己做个总结
marqueex.vue
<template>
<div class="my-outbox">
<div class="my-inbox" ref='box'>
<div class="my-list" :style="note" v-for="(item,index) in sendVal" :key='index' ref='list'>
<!--{{item.name}}刚刚购买了产品-->
<span class="my-uname">{{item.detail}}</span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'my-marquee-left',
props: {
sendVal:{
type:Array,
default:[]
}
},
data () {
return {
note: {
backgroundImage:
"url(" + require("../../../static/images/common/msg.png") + ")",
backgroundSize: "20px 20px",
backgroundRepeat: "no-repeat",
backgroundPosition:"1% 50%"
},
// 定时器标识
nowTime: null,
// 每一个内容的宽度
disArr: []
}
},
mounted () {
// var that = this
var item = this.$refs.list
var len = this.sendVal.length
var arr = []
// 因为设置的margin值一样，所以取第一个就行。
var margin = this.getMargin(item[0])
for (var i = 0; i < len; i++) {
arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离
}
this.disArr = arr
this.moveLeft()
},
beforeDestroy () {
// 页面关闭清除定时器
clearInterval(this.nowTime)
// 清除定时器标识
this.nowTime = null
},
methods: {
// 获取margin属性
getMargin (obj) {
var marg = window.getComputedStyle(obj, null)['margin-right']
marg = marg.replace('px', '')
return Number(marg) // 强制转化成数字
},
// 移动的方法
moveLeft () {
var that = this
var outbox = this.$refs.box
// 初始位置
var startDis = 0
// console.log('that.disArr: ', that.disArr)
this.nowTime = setInterval(function () {
startDis -= 0.5
// console.log('初始化移动：', startDis)
if (Math.abs(startDis) > Math.abs(that.disArr[0])) {
// 每次移动完一个元素的距离，就把这个元素的宽度
that.disArr.push(that.disArr.shift())
// 每次移动完一个元素的距离，就把列表数据的第一项放到最后一项
// console.log('that.sendVal: ', that.sendVal)
// console.log('that.sendVal: ', that.sendVal.shift())
that.sendVal.push(that.sendVal.shift())
startDis = 0
// console.log('移动')
} else {
// console.log('不来不来就不来...')
}
// 每次都让盒子移动指定的距离，在我自己做的项目中，这种字符串拼接的方法并没有生效
// outbox.style = 'transform: translateX3d(' + startDis + 'px)'
// 后面换了es6的模板字符串就可以了
outbox.style = `transform: translateX(${startDis}px)`
// outbox.style = 'transform: translateX(\' + startDis + \' px)'
// outbox.style.marginLeft = 'startDis'
// console.log('这里:', startDis)
}, 1000 / 60)
}
}
}
</script>
<style lang="less" scoped>
.my-outbox{
overflow: hidden;
color: #FFFFFF;
height: 35px;
.my-inbox{
white-space: nowrap;
.my-list{
margin-right: 100px;
display: inline-block;
font-size: 14px;
// height: 20px;
text-indent:30px;
line-height: 40px;
.my-uname{
color: #FFFFFF;
}
}
}
}
</style>其他模块引入根据自己目录引入
html部分
<div class="messageBox">
<marqueeLeft :sendVal="newsList"></marqueeLeft>
</div>js部分
import marqueeLeft from "./marqueeX";
export default {
data() {
return {
newsList: [
{
name: "张三1",
detail:
"信息公告：2020年10月14限公司成立，我行用信金额111111元",
},
{
name: "张三2",
detail:
"信息公告：2020年9月30大幅度发大发的，我行用信金额222222元",
},
{
name: "张三3",
detail:
"信息公告：2020年12月有限公司成立，我行用信金额333333元",
},
{
name: "张三4",
detail:
"信息公告：2020年8月31有限公司成立，我行用信金额444444元",
},
],
};
},
components: {
marqueeLeft,
},css部分
.messageBox {
width: 60%;
overflow: hidden;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
