vue轮播组件文字滚动vue-seamless-scroll

1.安装依赖

 npm i vue-seamless-scroll -S

2.局部注册

import vueSeamless from 'vue-seamless-scroll'
   export default {
      components: {
        vueSeamless
      }
   }

3.使用

HTML

          <vue-seamless-scroll
            :data="pt3Data.list[pt3Data.index].text1" //可以循环便利的数组
            :class-option="classOption" 
            class="seamless-warp"
          >
          <div>
           {{ pt3Data.list[pt3Data.index].text1 }}//展示 这个是调的接口
          </div>
          </vue-seamless-scroll>

可以看看这个插件的文档

computed: {
    classOption() {
      return {
        step: 0.3, //数值越大速度滚动越快
        limitMoveNum: 5, //开始无缝滚动的数据量  //this.fourDatata.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)
      };
    },
  },

css

.seamless-warp{
  width: 100%;
  height: calc(100% - 10px);
  // height: 100%;
  overflow: hidden;
}
上一篇:[JBoss] - JBAS015874: JBoss AS 7.1.1.Final "Brontes" started - Eclipse中不能正常启动的解决方法


下一篇:Vue实现上下左右无缝滚动,鼠标移入并暂停