vue-seamless-scroll

最新推荐文章于 2026-05-18 05:07:33 发布

原创最新推荐文章于 2026-05-18 05:07:33 发布 · 293 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

Vue

这篇博客详细介绍了如何在Vue中实现无缝滚动效果，包括向上、向下和左右滚动的配置方法。通过调整direction参数可以切换滚动方向，同时在实现左右滚动时需要注意设置ul元素的宽度。

1.实现向上滚动

//向上滚动
<template>
    <vue-seamless-scroll :data="projectDesList" :class-option="optionSetting" class="seamless-warp">
      <ul class="item">
        <li v-for="item in projectDesList" v-text="item.title" :key="item.title"></li>
      </ul>
    </vue-seamless-scroll>
</template>

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

  export default {
    name: 'HelloWorld',
    props: {
      msg: String,
    },
    components: {
      vueSeamlessScroll,
    },
    data () {
      return {
        projectDesList: [{
          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',
        }],
      }
    },
    computed: {

      optionSetting () {

        return {
          step: 1, // 数值越大速度滚动越快
          limitMoveNum: 9, // 开始无缝滚动的数据量 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)
        }
      },
    },
  }
</script>

<style scoped>
  .seamless-warp {
    height: 229px;
    width: 220px;
    overflow: hidden;
  }
  ul{
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }
  li{
    height: 30px;
    line-height: 30px;
    font-size: 15px;
  }
</style>

2.实现向下滚动
只要把配置参数里的direction改为0则为向下滚动

3.实现左右滚动
貌似在左右滚动的时候要给ul设置一个宽度

<template>
    <vue-seamless-scroll :data="projectDesList" :class-option="optionSetting" class="seamless-warp">
      <ul class="item">
        <ll>
          <img src="../assets/timg.png" alt="" style="width: 220px;height: 220px">
        </ll>
        <ll>
          <img src="../assets/p1.jpg" alt="" style="width: 220px;height: 220px">
        </ll>
        <ll>
          <img src="../assets/p2.png" alt="" style="width: 220px;height: 220px">
        </ll>
      </ul>
    </vue-seamless-scroll>
</template>

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

  export default {
    name: 'HelloWorld',
    props: {
      msg: String,
    },
    components: {
      vueSeamlessScroll,
    },
    data () {
      return {
        projectDesList: [{
          title: '无缝滚动第一行',
          date: '2017-12-16',
        }, {
          title: '无缝滚动第二行',
          date: '2017-12-16',
        }, {
          title: '无缝滚动第三行',
          date: '2017-12-16',
        },],
      }
    },
    computed: {

      optionSetting () {

        return {
          step: 0.5, // 数值越大速度滚动越快
          limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 2, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        }
      },
    },
  }
</script>

<style scoped>
  .seamless-warp {
    height: 229px;
    width:500px;
    overflow: hidden;
  }
  ul{
    width: 660px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
  }
  li{
    height: 220px;
  }
</style>