如果我默认是空数组 写一个定时器 定时往里添加数据 这时候默认是不滚动的 鼠标移动上去才滚动 现在应用场景是数据可视化 websocket数据实时更新 但是使用以后 不实时获取数据滚动

发布于 2020-11-13 10:35
共2个回答
OI
游客oiHIeZ

你可以试一下显示调用 _startMove()方法。

<vue-seamless-scroll ref="myScroll"></vue-seamless-scroll>

调用

this.$refs.myScoll._startMove();
UJ
游客uJLTPs

这里是官方解答:

<template>
  <vue-seamless-scroll :data="listData" class="warp" ref="seamlessScroll">
    <ul class="item">
      <li v-for="(item, index) in listData" :key="index">
        <span class="title" v-text="item.title"></span>
        <span class="date" v-text="item.date"></span>
      </li>
    </ul>
  </vue-seamless-scroll>
</template>

<script>
  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    name: 'Example10Basic',
    components: {
      vueSeamlessScroll
    },
    data () {
      return {
        listData: [{
          'title': '无缝滚动第一行无缝滚动第一行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第二行无缝滚动第二行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第三行无缝滚动第三行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第四行无缝滚动第四行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第五行无缝滚动第五行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第六行无缝滚动第六行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第七行无缝滚动第七行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第八行无缝滚动第八行',
          'date': '2017-12-16'
        }, {
          'title': '无缝滚动第九行无缝滚动第九行',
          'date': '2017-12-16'
        }],
      }
    },
    mounted() {
      setTimeout(() => {
        this.listData[0] = {
          title: '我的第一条的title,我被更新了。',
          date: 'date1'
        }
        this.listData[1] = {
          title: '我的第二条的title,我被更新了。',
          date: 'date2'
        }
        this.listData[2] = {
          title: '我的第三条的title,我被更新了。',
          date: 'date3'
        }
        this.listData[3] = {
          title: '我的第四条的title,我被更新了。',
          date: 'date4'
        }
        this.listData.push()
        // listData length无变化,仅仅是属性变更,手动调用下组件内部的reset方法
        this.$refs.seamlessScroll.reset()
      }, 2000);
    },
  }
</script>

<style lang="scss" scoped>
  .warp {
    height: 270px;
    width: 360px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,
      a {
        display: block;
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    }
  }
</style>

参见:https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/11-array-length-update.html

回答问题