vue vue-seamless-scroll表单连续滚动

<template>
  <div class="boxYj">
    <div class="earlyWarnin">
      <div class="topImg">
        <img src="../../assets/images/yj.png" alt="">
      </div>
      <div class="IconFont">
        <img src="../../assets/images/sys.png" alt="">
        <p>123</p>
      </div>
      <div class="ballexplain">
          <div class="plantsTitle"> 
                <span v-for="(item,index) in listDataTitle" :key='index'>{{item}}</span>
          </div>
          <div class="page-example3">
            <vue-seamless-scroll :data="listData" :class-option="defaultOption" >
                <ul class="ul-scoll">
                    <li v-for="(item, id) in listData" :key='id'>
                        <span class="date">{{item.zj}}</span> 
                        <span class="date">{{item.ke}}</span>
                        <span class="date">{{item.bl}}</span>
                        <span class="date">{{item.s}}</span>
                        <span class="date">{{item.bl2}}</span>
                        <span class="date">{{item.z}}</span>
                        <span class="date">{{item.bl3}}</span> 
                    </li>
                </ul>
            </vue-seamless-scroll>
        </div> 
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
export default {
  data () {
    return { 
      listDataTitle:['分类群','科','比例','属','比例','种','比例'],
      listData:[ 
        {id:1,zj:'总计', ke:78 ,bl:'100%',  s:647, bl2:'100%',  z:1193, bl3:'100%'},
        {id:2,zj:'蕨类植物', ke:30 ,bl:'16.58%',s:57,  bl2:'8.81%', z:83,   bl3:'6.96%'},
        {id:3,zj:'种子植物', ke:148,bl:'83.15%',s:590, bl2:'91.19%',z:1110, bl3:'93.04%'}
      ]
    };
  },

  components: {
    vueSeamlessScroll
  },

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

  mounted(){},

  methods: {},
}

</script>
<style scoped>
.boxYj{
    margin-top: .1rem;
}
.IconFont{
    padding: .1rem;
  display: flex;
  align-items: center;

}
.earlyWarnin{ 
  border: .01rem solid #045589;
  background: rgba(1, 11, 19, 0.36);

}
.IconFont img{
    width: .28rem;
    height: .24rem;
}
.IconFont p{
  font-size: .16rem;
  font-weight: bold;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #fff;
  line-height: .16px;
  margin-left: .1rem;
}
.topImg{
  width: 2.5rem;
  height: .14rem;
}
.topImg img{
  position: absolute;
  width: 4.45rem;
  height: .14rem;

}
.IconFont h2{
    font-size: .2rem;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFF;
    line-height: 20px;
    padding: 0 .1rem;
}

.explain p{
    display: flex;
    align-items: center;
    margin-left: 0.2rem;

}
.explain .explainleft{
  margin-right: .05rem;
  width: .03rem;
  height: .03rem;
  background: #fff;
  display: inline-block;
}


.explain p .explainright{
    font-size: .12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF;
    line-height: .24rem;
}


/* 修改无限轮播----------------------------------- */

.plantsTitle{
    display: flex;
    justify-content: space-between;
    align-items: center; 
    padding: 0.1rem;
}
.plantsTitle span{
    color: rgb(28, 173, 241);
    font-size: .12rem;
    text-align: center; 
    flex-shrink: 0;
    width:.5rem;
}

.page-example3{
    height: 1rem;
    overflow: hidden; 
}
 
 .ul-scoll  li{ 
    padding:0 .1rem ;
    line-height: .4rem;
    display: flex;
    justify-content: space-between; 
    align-items: center; 

 }

.ul-scoll  li span{ 
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    -webkit-line-clamp: 1;
    flex-shrink: 0;
    width:.5rem;
    text-align: center;
    font-size: .12rem;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #FFFFFF; 
}
 

</style>