vue 文字滚动效果

最新推荐文章于 2023-08-02 09:38:23 发布

原创最新推荐文章于 2023-08-02 09:38:23 发布 · 564 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#文字滚动 #列表滚动

方式一

1.npm install vue-seamless-scroll --save  安装vue-seamless-scroll

2.在相应的组件中

import vueSeamlessScroll from 'vue-seamless-scroll'

components:{
  vueSeamlessScroll
},

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)
    }
  }
},

<vue-seamless-scroll :data="comdetails" :class-option="defaultOption" class="com-infor text">

</vue-seamless-scroll>

comdetails:['aaaaaaaaaaaaaaaaaaaaaaa','bbbbbbbbbbbbbbb']

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

方式二

<transition-group name="list" tag="ul" class="animate_list">
  <li v-for="(item,index) in carTrajectoryList" v-bind:key="item.name" :id="index">
    <span class="gjName">{{item.name}}</span>
    <span class="gjUnit">/天</span>
    <span class="gjNum">{{item.num}}</span>
  </li>
</transition-group>

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

}

destroyed(){

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

}