VUE实现文字左右滚动跑马灯

直接上代码

// 在components中定义一个可引用的组件
// 此功能封装并非原创，在网上看到的，哪里看的忘了
// components 部分
<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: Array},data () {return {// 定时器标识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 = 0console.log('that.disArr: ', that.disArr)this.nowTime = setInterval(function () {startDis -= 0.5// console.log('初始化移动：', startDis)if (Math.abs(startDis) > Math.abs(that.disArr[0])) {console.log('come if .....')// 每次移动完一个元素的距离，就把这个元素的宽度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="scss" scoped>
.my-outbox{/*color: #D7BC8D;*/overflow: hidden;color: #FFFFFF;height: 35px;/*background: #422b02;*/.my-inbox{white-space: nowrap;.my-list{margin-right: 25px;display: inline-block;font-size: 0.3rem;height: 40px;line-height: 40px;.my-uname{/*color: #FF8900;*/color: #FFFFFF;}}}
}
</style>// 正文index部分
<template><marqueeLeft :sendVal='newItems'></marqueeLeft >
</template>
<script>
import marqueeLeft from '@/components/marquee/marquee'
export default{data () {return {newItems[{name: '张三', detail: '152****7846抽中5元电影票'},{name: '张三', detail: '134****7866抽中5元饭票'},{name: '张三', detail: '180****3300抽中华为新品 HUAWEI nova 4手机'}]}}
}
</script>

VUE实现文字左右滚动跑马灯相关推荐

android文字自动滚动,Android TextView文字横向自动滚动(跑马灯)
TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true" 2.设置可滚到,或显示样式:android:elli ...
Android:TextView 自动滚动(跑马灯) （转）
Android:TextView 自动滚动(跑马灯) TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true" ...
Android TextView文字横向自动滚动(跑马灯)
TextView实现文字滚动需要以下几个要点: 1.文字长度长于可显示范围:android:singleLine="true" 2.设置可滚到,或显示样式:android:elli ...
单行文字垂直/水平跑马灯效果
需求描述接到的需求是这样的:跑马灯效果一次展示一行文字循环滚动文字滚动到视野中停留一秒后滚出. 静态效果如下图,文字从下往上或者从右往左滚动,滚动到此位置时停留一秒(不会传动图... 网络上有 ...
CSS+JavaScript制作文字的LED跑马灯效果
以下是html代码: <head><meta charset="utf-8" /><title>文字跑马灯</title><l ...
Android 使用 ellipsize 实现文字横向移动效果(跑马灯效果)
实现的效果图如下 ellipsize 可以设置跑马灯效果具体代码设置如下 <TextViewandroid:layout_width="match_parent"andro ...
【Vue案例一】实现跑马灯效果
在Vue学习笔记(一)中我们已经学过了 v-on 这个指令,可以用来实现事件的绑定,本文我们利用 v-on 来实现一个简单的跑马灯效果,就是如下这种效果: 第一步:导入Vue包 <script ...
css3 文字走马灯,前端开发：css3实现文字首尾衔接跑马灯
故事背景事情是这样的,卤煮无意间得知一款外放效果宇宙无敌第一的手机!!!脑袋一热就趁着阿东618大促搞了一台,毕竟卤煮是一个地道的电子发烧友!!!但是当卤煮查询物流信息的时候...... 好吧,我这 ...
vue 手写图片左右跑马灯效果
效果图与代码贴上: 1.html部分 <template><div class="box"><Icon class="icons1 icon ...

VUE实现文字左右滚动跑马灯

直接上代码

VUE实现文字左右滚动跑马灯相关推荐

最新文章

热门文章