vue滚动插件 vue-seamless-scroll

vue yekong

vue项目开发中,经常需要一些列表滚动效果,之前一直使用的是liMarquee,一个滚动的时候,效果还可以,多个滚动的时候总感觉有点不对,就换了一个插件
安装依赖

npm i  vue-seamless-scroll --save

使用

    <vue-seamless-scroll
      :data="list"
      :class-option="defaultOption"
      class="paiming"
    >
      <div v-for="(item,index) in list" :key="index">
        <div class="title">图书馆实时视频</div>
        <div class="videos">
          <img src="../../assets/tushu/shipinimg.png" alt="">
          <img src="../../assets/tushu/shipinimg.png" alt="">
          <img src="../../assets/tushu/shipinimg.png" alt="">
          <img src="../../assets/tushu/shipinimg.png" alt="">
        </div>
      </div>
    </vue-seamless-scroll>
<script>
import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  name: 'shipin',
  components: { vueSeamlessScroll },
  props: {
    id: {
      type: String,
      default () {
        return ''
      }
    }
  },
  data () {
    return {
      list: [null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null,]
    }
  },
  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)
      }
    }
  },
  watch: {},
  mounted () {
  },
  methods: {}
}
</script>

喜欢