详解vue 自定义marquee无缝滚动组件


Posted in Javascript onApril 09, 2019

先上效果图:

详解vue 自定义marquee无缝滚动组件

(1) 看起来可能有点卡顿,但是实际上页面上看起来挺顺畅的。

(2) 思路就是获取每一个列表的宽度,设置定时器移动列表,当移动的距离达到一个列表的宽度的时候,把这个距离放到数组的最后。这样就能达成无缝循环滚动了。

 大致的情况就是下面这样:

 详解vue 自定义marquee无缝滚动组件

接下来就是代码的实现:

index.vue 引入组件

<template>
 <div>
  <marqueeLeft :send-val='send'></marqueeLeft >
 </div>
</template>
<script>
 import marqueeLeft from '../components/marquee'
 export default {
  data:function(){
   return{
    send:[{place: "来自东莞市的", name: "黄女士"},
   {place: "来自太原市的", name: "吴先生"},
   {place: "来自常州市的", name: "戚先生"},
   {place: "来自金华市的", name: "尤先生"},
   {place: "来自贵阳市的", name: "陈女士"},
   {place: "来自长春市的", name: "魏女士"},
   {place: "来自泉州市的", name: "褚先生"},
   {place: "来自南昌市的", name: "蒋女士"},
   {place: "来自南京市的", name: "沈先生"},
   {place: "来自天津市的", name: "韩先生"},
   {place: "来自宁波市的", name: "邹女士"},
   {place: "来自嘉兴市的", name: "周女士"},
   {place: "来自长沙市的", name: "秦先生"},
   {place: "来自济南市的", name: "孙女士"},
   {place: "来自杭州市的", name: "杨先生"}]
   }
  },
  components:{ marqueeLeft },
 }
</script>

marquee.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.place}}<span class="my-uname">{{item.name}}</span>刚刚购买了产品
   </div>
  </div>
 </div>
</template>

<script>
 export default {
  name:'my-marquee-left',
  props:{  
   sendVal:Array
  },
  data() {
   return {
    nowTime:null,//定时器标识
    disArr:[],//每一个内容的宽度
   }
  }, 
  mounted:function(){
   var that = this;
   var item = this.$refs.list; 
   var len = this.sendVal.length;
   var arr = [];
   var margin = this.getMargin(item[0]) //因为设置的margin值一样,所以取第一个就行。
   for(var i = 0;i < len;i++){
    arr.push(item[i].clientWidth + margin)//把宽度和 margin 加起来就是每一个元素需要移动的距离
   }
   this.disArr = arr;
   this.moveLeft();
  },
  beforeDestroy:function(){
   clearInterval(this.nowTime);//页面关闭清除定时器
   this.nowTime = null;//清除定时器标识
  },
  methods:{
   //获取margin属性
   getMargin:function(obj){
    var marg = window.getComputedStyle(obj,null)['margin-right'];
    marg = marg.replace('px','')
    return Number(marg) //强制转化成数字
   },
   //移动的方法
   moveLeft:function(){
    var outbox = this.$refs.box;
    var that=this;
    var startDis = 0;//初始位置
    this.nowTime = setInterval(function(){
     startDis -= 0.5;
     if(Math.abs(startDis) > Math.abs(that.disArr[0])){
      that.disArr.push(that.disArr.shift())//每次移动完一个元素的距离,就把这个元素的宽度
      that.sendVal.push(that.sendVal.shift())//每次移动完一个元素的距离,就把列表数据的第一项放到最后一项
      startDis = 0;
     }
     outbox.style = 'transform: translateX('+ startDis +'px)'; //每次都让盒子移动指定的距离
    },1000/60)
   }
  }
 }
</script>

<style lang="less" scoped>
 .my-outbox{
  color: #D7BC8D;
  overflow: hidden;
  height: 35px;
  background: #422b02;
  .my-inbox{
   white-space: nowrap;
   .my-list{
    margin-right: 25px;
    display: inline-block;
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    .my-uname{
     color: #FF8900;
    }
   }
  }
 }
</style>

(1) 添加一个获取margin的方法,是为了保证如果是使用 rem em 等单位时,margin值不会出现偏差的情况

(2) 如果引入组件的页面中,send-val的值是异步请求的。那么,在marquee.vue组件页面,多数情况会获取不了 refs 。这时候我自己的解决方法是:

<marqueeLeft :send-val='send' v-if='send'></marqueeLeft >

 表示只有当 send 不为空的时候才渲染该组件,不过这种情况会导致如果 请求响应太慢,组件会一直渲染不出来,就可能会影响布局。

(3) 如果不想每次都去设置transform,那么可以把transform放到该元素上,然后修改data中的数据就行了,比如:

<div class="my-inbox" :style='transform: translateX('+ cssStyle +'px)'></div>
// 然后在 js 中把 每次移动的值,赋值给cssStyle就行了。不过我感觉这种没什么区别

 如果想实现,上下无缝滚动,这种效果。思路和左右无缝滚动一样,基本上只需要把 transform 改成 Y轴移动 ,每个列表的宽度改成高度就行了。

不清楚这种方式实现是否会有什么问题,FPS一直保持在 接近60左右。暂时没发现什么缺点。。。

以上所述是小编给大家介绍的vue自定义marquee无缝滚动组件详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
javascript使用正则表达式实现去掉空格之后的字符
Feb 15 Javascript
jQuery实现鼠标经过图片变亮其他变暗效果
May 08 Javascript
AngularJS Controller作用域
Jan 09 Javascript
input输入密码变黑点密文的实现方法
Jan 09 Javascript
JavaScript脚本语言是什么_动力节点Java学院整理
Jun 26 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
JavaScript实现小球沿正弦曲线运动
Sep 07 Javascript
koa-router路由参数和前端路由的结合详解
May 19 Javascript
javascript实现手动点赞效果
Apr 09 #Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 #Javascript
浅谈Vue.js组件(二)
Apr 09 #Javascript
4 种滚动吸顶实现方式的比较
Apr 09 #Javascript
vue响应式系统之observe、watcher、dep的源码解析
Apr 09 #Javascript
浅谈发布订阅模式与观察者模式
Apr 09 #Javascript
vue使用keep-alive保持滚动条位置的实现方法
Apr 09 #Javascript
You might like
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
php字符串截取函数mb_substr用法实例分析
2019/06/25 PHP
七种PHP开发环境搭建工具
2020/06/28 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
2010/04/01 Javascript
简单选项卡 js和jquery制作方法分享
2014/02/26 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
javascript日期操作详解(脚本之家整理)
2015/09/05 Javascript
深入理解(function(){... })();
2016/08/16 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
2017/04/17 jQuery
Jquery EasyUI $.Parser
2017/06/02 jQuery
详解使用vscode+es6写nodejs服务端调试配置
2017/09/21 NodeJs
基于Vue框架vux组件库实现上拉刷新功能
2017/11/28 Javascript
vue项目引入字体.ttf的方法
2018/09/28 Javascript
python绘制简单折线图代码示例
2017/12/19 Python
linecache模块加载和缓存文件内容详解
2018/01/11 Python
使用DataFrame删除行和列的实例讲解
2018/04/08 Python
python reverse反转部分数组的实例
2018/12/13 Python
python 实现一次性在文件中写入多行的方法
2019/01/28 Python
Python实现EXCEL表格的排序功能示例
2019/06/25 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python实现网站微信登录的示例代码
2019/09/18 Python
Python计算IV值的示例讲解
2020/02/28 Python
Django数据统计功能count()的使用
2020/11/30 Python
HTML5触摸事件(touchstart、touchmove和touchend)的实现
2020/05/08 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
美国在线眼镜商城:Eyeglasses.com
2017/06/26 全球购物
一家外企的面试题目(C/C++面试题,C语言面试题)
2014/03/24 面试题
铭万公司.net面试题笔试题
2014/07/20 面试题
建筑人员岗位职责
2013/12/25 职场文书
对照四风自我剖析材料
2014/10/07 职场文书
贷款承诺书
2015/01/20 职场文书