vue 文字滚动效果

方式一

1.npm install vue-seamless-scroll --save  安装vue-seamless-scroll
2.在相应的组件中
import vueSeamlessScroll from 'vue-seamless-scroll'
components:{
  vueSeamlessScroll
},

3.

computed: {

  // 公告滚动自定义
  defaultOption () {
    return {
      step: 0.2, // 数值越大速度滚动越快
      limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
      hoverStop: true, // 是否开启鼠标悬停stop
      direction: 1, // 0向下 1向上 2向左 3向右
      openWatch: true, // 开启数据实时监控刷新dom
      singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
      singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
      waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
    }
  }
},

4.

{ {text}}

comdetails:['aaaaaaaaaaaaaaaaaaaaaaa','bbbbbbbbbbbbbbb']

5.

.com-infor{
   &.text{
     padding: 10px 10px;
     height: 90px;
     overflow: hidden;
     text-align: justify;
     white-space: normal;
   }
 }

方式二

1.


  
  • { {item.name}} /天 { {item.num}}
  • data中
    carTrajectoryList:[{name:'出租车轨迹',num:'60G'},{name:'网约车轨迹',num:'1.6T'},
      {name:'监控运营车',num:'102G'},{name:'商用车轨迹',num:'9.5G'},
      {name:'大型车车轨迹',num:'600G'},{name:'车联网车轨迹',num:'50G'},
      {name:'用户生成轨迹',num:''}],

    guijiListTimer:null,

    样式中
    .list-move{
        transition: all 1s;
      }
    .list-leave-active{
      position:absolute;
      opacity: 0;
    }
    .animate_list{
      list-style: none;
      //margin: 15px 0;
      height: 250px;
      overflow: hidden;
      li{
        margin: 26px 0;
        height: 30px;
        .gjName{
          @include fontstyle($title-font-style,$dataNum-title-fontsize,$dataNum-enTitle--fontcolor);
          line-height: 30px;
        }
        .gjNum{
          float: right;
          @include fontstyle($number-font-style,$date-fontsize-style,$dataNum-num-fontcolor);
          line-height: 30px;
    
        }
        .gjUnit{
          float: right;
          @include fontstyle($title-font-style,$mostsmall-fontsize-style,$dataNum-enTitle--fontcolor);
          line-height:30px;
    
        }
      }
    }

    2.mounted()

    if(that.guijiListTimer!=null){
      clearInterval(that.guijiListTimer);
      that.guijiListTimer=null;
    }
    that.guijiListTimer=setInterval(function(){
      that.ulAnimation();
    },3000);

    3.methods中

    ulAnimation(){
      let that=this;
      let firstObj=that.carTrajectoryList[0];
      that.carTrajectoryList.splice(0,1);
      setTimeout(function(){
        that.carTrajectoryList.push(firstObj);
      },1500);

    }

    4

    destroyed(){
       
    if(this.guijiListTimer!=null){
      clearInterval(this.guijiListTimer);
      this.guijiListTimer=null;
    }

    }

    你可能感兴趣的:(文字滚动,列表滚动)