vue中公告消息横向⽆缝循环滚动
该组件实现了公告消息的⽆缝横向滚动。我命名为marqueex.vue⽂件，感谢原来博主的分享，我⾃⼰做个总结marqueex.vue
<template>
<div class="my-outbox">
<div class="my-inbox" ref='box'>
<div class="my-list" : 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 = Margin(item[0])
for (var i = 0; i < len; i++) {
arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每⼀个元素需要移动的距离
}
this.disArr = arr
},
beforeDestroy () {
// 页⾯关闭清除定时器
wTime)
// 清除定时器标识
},
methods: {
// 获取margin属性
getMargin (obj) {
var marg = ComputedStyle(obj, null)['margin-right']
marg = place('px', '')
return Number(marg) // 强制转化成数字
},
// 移动的⽅法
moveLeft () {
var that = this
var outbox = this.$refs.box
/
/ 初始位置
var startDis = 0
//  console.log('that.disArr: ', that.disArr)
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{
/*color: #D7BC8D;*/
overflow: hidden;
color: #FFFFFF;
height: 35px;
/*background: #422b02;*/
.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: #FF8900;*/
color: #FFFFFF;
}
}
}
}
</style>
其他模块引⼊根据⾃⼰⽬录引⼊
html部分
<div class="messageBox">
<marqueeLeft :sendVal="newsList"></marqueeLeft>
</div>
js部分
marquee marquee
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;
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。