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 = thisvar item = this.$refs.listvar len = this.sendVal.lengthvar arr = []// 因为设置的margin值一样，所以取第一个就行。var margin = this.getMargin(item[0])for (var i = 0; i < len; i++) {arr.push(item[i].clientWidth + margin) // 把宽度和 margin 加起来就是每一个元素需要移动的距离}this.disArr = arrthis.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 = thisvar 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{/*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部分

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;
}

vue中公告消息横向无缝循环滚动相关推荐

vue如何实现消息的无缝滚动
vue如何实现消息的无缝滚动 export default { data() { return { animate:false, items:[ {name:"马云"}, {nam ...
vue-seamless-scroll无缝循环滚动时二轮图片不渲染
关于使用vue-seamless-scroll实现图片无缝循环滚动时出现第二轮图片需要第一轮图片滚动结束后才能渲染出来的问题. 1.我遇到的问题很清楚,就是图片应该无缝循环滚动,但是必须得等前一轮图片 ...
在线直播系统源码，横向无限循环滚动的单行弹幕效果
在线直播系统源码,横向无限循环滚动的单行弹幕效果实现的相关代码实现思路分析要实现上面的效果,我们先拆分下实现要素: 1.弹幕布局是从屏幕的右侧向左侧滚动,单个弹幕之间的间距是固定的(设计要求) 2 ...
无缝循环滚动图片的JS代码
无缝循环滚动图片的JS代码,用来展示商品什么的最好了,图片URL可以自行替换,速度也可以自己调试. <html> <head> <meta http-equiv=&quo ...
vue实现数据无缝循环滚动
通过定时器控制数据的margin-top实现数据滚动,滚动到一定位置时将数组的前几条数据push进数组,同时把这几条数据删除废话不说了,上代码 <div class="realDat ...
网页图片无缝循环滚动html代码
图片循环滚动代码图片无缝滚动代码先介绍一下它的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通 ...
vue中手写动态渲染左右滚动菜单栏点击居左以及设置scrollLeft属性设置无效的原因解决
vue中可能会碰到无法使用框架的问题,此时需要手写左右滚动的滑动菜单栏,并且头部或者底部还有对应的标题点击定位.此时应该怎么做呢? (1)下面看结构: <div class="cour ...
Cocos2dx中利用双向链表实现无限循环滚动层
[Qboy原创] 在Cocos2dX 3.0 中已经实现一些牛逼的滚动层,但是对于有一些需要实现循环滚动的要求确没有实现,笔者在前段时间的一个做了一个游戏,需求是实现在少有的(13个)英雄中进行循环滚 ...
html图片左右无缝循环滚动示例
首先,最外层的宽高要给个固定值,然后给个overflow: hidden;,放不下的图片隐藏. 原理:(以左方向为例)先向左移动一个图片的宽度,此时第一个图片已经看不见了,这个时候将第一个标签元素克隆 ...
vue中使用vue-seamless-scroll插件无缝滚动
需求:使用vue-seamless-scroll插件实现列表无缝滚动,也可以添加相应的点击跳转,点击事件会存在点击失效的问题.支持上下左右无缝滚动,单步滚动停留时间,以及水平方向的手动切换. 效果图: ...

vue中公告消息横向无缝循环滚动

html部分

js部分

css部分

vue中公告消息横向无缝循环滚动相关推荐

最新文章

热门文章