社区 学习 工具库 休闲
搜索
简体中文
首页 > web前端 > js教程 > 使用vue如何实现无缝滚动组件

使用vue如何实现无缝滚动组件

亚连
发布： 2018-06-20 13:50:56
原创
2119 人浏览过

本篇文章主要给大家讲解了vue的无缝滚动组件vue-seamless-scroll的用法，需要的朋友参考学习下吧。

Installation

NPM

npm install vue-seamless-scroll --save
登录后复制

Usage

ES6

以下es6用法需要webpack环境编译.

<template>
  <p id="app">
    <p class="fixed top-0 w-100 z-1 flex-none flex flex-row items-center pv3 ph4 bg-blue white">
      <p class="flex-none"><a href="https://github.com/chenxuan0000/vue-seamless-scroll" rel="external nofollow" rel="external nofollow" rel="noopener"
                   target="_blank" title="View on Github">
        <svg xmlns="http://www.w3.org/2000/svg" fill="white" width="32" height="32" viewBox="0 0 16 16">
          <path d="M8 .198c-4.418 0-8 3.582-8 8 0 3.535 2.292 6.533 5.47 7.59.4.075.548-.173.548-.384 0-.19-.008-.82-.01-1.49-2.227.485-2.696-.943-2.696-.943-.364-.924-.888-1.17-.888-1.17-.726-.497.055-.486.055-.486.802.056 1.225.824 1.225.824.714 1.223 1.872.87 2.328.665.072-.517.28-.87.508-1.07-1.776-.202-3.644-.888-3.644-3.954 0-.874.313-1.588.824-2.148-.083-.202-.357-1.015.077-2.117 0 0 .672-.215 2.2.82.64-.177 1.323-.266 2.003-.27.68.004 1.365.093 2.004.27 1.527-1.035 2.198-.82 2.198-.82.435 1.102.162 1.916.08 2.117.512.56.822 1.274.822 2.147 0 3.072-1.872 3.748-3.653 3.946.288.248.544.735.544 1.48 0 1.07-.01 1.933-.01 2.196 0 .213.145.462.55.384 3.178-1.06 5.467-4.057 5.467-7.59 0-4.418-3.58-8-8-8z"></path>
        </svg>
      </a>
      </p>
      <p class="flex-none" style="margin-left: 10px;"><a href="https://github.com/chenxuan0000/vue-seamless-scroll" rel="external nofollow" rel="external nofollow" 
                   class="white no-underline underline-hover">vue-seamless-scroll</a></p>
    </p>
    <p class="pt5 f2" style="text-align: center;">无缝滚动demo</p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo1</b> 向上无缝滚动,hover可停止</p>
        var option = {<br/>
              step: 0.5,<br/>
              limitMoveNum: 5<br/>
        }
      </p>
      <my-class :data="listData" :class-option="classOption" @copy-data="listData = listData.concat(listData)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData"><span class="title" v-text="item.title"></span><span class="date"
                                                   v-text="item.date"></span>
          </li>
        </ul>
      </my-class>
    </p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo2</b> limitMoveNum过大不滚动 开启了openWatch</p>
        <p>3s后data增加到9条</p>
        var option = {<br/>
              limitMoveNum: 7<br/>
        }
      </p>
      <my-class :data="listData1" :class-option="classOption1"
           @copy-data="listData1 = listData1.concat(listData1)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData1"><span class="title" v-text="item.title"></span><span
              class="date" v-text="item.date"></span></li>
        </ul>
      </my-class>
    </p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo3</b> limitMoveNum过大不滚动 关闭了openWatch</p>
        <p>3s后data增加到9条</p>
        var option = {<br/>
              limitMoveNum: 7<br/>
              openWatch: false<br/>
        }
      </p>
      <my-class :data="listData2" :class-option="classOption2"
           @copy-data="listData2 = listData2.concat(listData2)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData2"><span class="title" v-text="item.title"></span><span
              class="date" v-text="item.date"></span></li>
        </ul>
      </my-class>
    </p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo4</b> 向下滚动,禁止了hover悬停</p>
        var option = {<br/>
              limitMoveNum: 5,<br/>
              direction: 0,<br/>
              hoverStop: false,<br/>
        }
      </p>
      <my-class :data="listData3" :class-option="classOption3"
           @copy-data="listData3 = listData3.concat(listData3)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData3"><span class="title" v-text="item.title"></span><span
              class="date" v-text="item.date"></span></li>
        </ul>
      </my-class>
    </p>
    <p class="flex wd800">
      <p class="options" style="color:#357edd;">
        <p><b>demo5</b> 向上无缝滚动,单条停止一段时间</p>
        var option = {<br/>
              step: 0.5,<br/>
              limitMoveNum: 5<br/>
              singleHeight: 30,<br/>
              waitTime: 1000<br/>
        }
      </p>
      <my-class :data="listData4" :class-option="classOption4"
           @copy-data="listData4 = listData4.concat(listData4)"
           class="warp">
        <ul class="item">
          <li v-for="item in listData4"><span class="title" v-text="item.title"></span><span class="date"
                                                    v-text="item.date"></span>
          </li>
        </ul>
      </my-class>
    </p>
  </p>
</template>

<script>
 import myClass from &#39;../src/components/myClass.vue&#39;
 export default {
  name: &#39;app&#39;,
  data () {
   return {
    listData: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第九行无缝滚动第九行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
    listData1: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
    listData2: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
    listData3: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
    listData4: [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第九行无缝滚动第九行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }],
   }
  },
  computed: {
   classOption () {
    return {
     step: 0.5,
     limitMoveNum: 5
    }
   },
   classOption1 () {
    return {
     limitMoveNum: 7
    }
   },
   classOption2 () {
    return {
     limitMoveNum: 7,
     openWatch: false
    }
   },
   classOption3 () {
    return {
     limitMoveNum: 5,
     direction: 0,
     hoverStop: false
    }
   },
   classOption4 () {
    return {
     step: 0.5,
     limitMoveNum: 5,
     singleHeight: 30,
     waitTime: 1000
    }
   }
  },
  components: {
   myClass
  },
  created () {
   setTimeout(() => {
    this.listData1 = this.listData2 = [{
     &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }, {
     &#39;title&#39;: &#39;无缝滚动第九行无缝滚动第九行&#39;,
     &#39;date&#39;: &#39;2017-12-16&#39;
    }]
   }, 3000)
  }
 }
</script>

<style lang="scss">
  #app {
    padding-bottom: 100px;
  }
  .flex-fill {
    -ms-flex: 1 1;
    flex: 1 1;
  }
  .options {
    width: 300px;
    font-size: 15px;
    margin-right: 60px;
    p {
      color: #000;
      margin-bottom: 30px;
      b {
        font-size: 16px;
        font-style: italic;
      }
    }
  }
  .wd800 {
    width: 800px;
    margin: 30px auto;
  }
  .warp {
    height: 260px;
    width: 360px;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    }
  }
  @media screen and (max-width: 770px) {
    .warp {
      width: 90%;
      margin: 0 auto;
    }
    body {
      background-color: lightblue;
    }
    .wd800 {
      width: 100%;
    }
    .flex.wd800 {
      display: block;
    }
    .options {
      width: 90%;
      margin: 20px auto;
      p {
        margin-bottom:0;
      }
    }
  }
</style>
登录后复制
import Vue from &#39;vue&#39;
import vueSeamlessScroll from &#39;vue-seamless-scroll&#39;

new Vue({
 components: {
  vueSeamlessScroll
 }
})
登录后复制

普通模式 (script tag)

Example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport"
       content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      .warp {
        height: 260px;
        width: 360px;
        overflow: hidden;
      }
      .warp ul {
        list-style: none;
        padding: 0;
        margin: 0 auto;
      }
      .warp li {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <p id="app">
      <vue-seamless-scroll :data="listData" :class-option="classOption"
                 @copy-data="listData = listData.concat(listData)"
                 class="warp">
        <ul class="item">
          <li v-for="item in listData"><span class="title" v-text="item.title"></span><span class="date"
                                                   v-text="item.date"></span>
          </li>
        </ul>
      </vue-seamless-scroll>
    </p>
    <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
    <script src="../dist/vue-seamless-scroll.min.js"></script>
    <script>
     new Vue({
      el: &#39;#app&#39;,
      data: {
       listData: [{
        &#39;title&#39;: &#39;无缝滚动第一行无缝滚动第一行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第二行无缝滚动第二行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第三行无缝滚动第三行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第四行无缝滚动第四行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第五行无缝滚动第五行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第六行无缝滚动第六行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第七行无缝滚动第七行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第八行无缝滚动第八行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }, {
        &#39;title&#39;: &#39;无缝滚动第九行无缝滚动第九行&#39;,
        &#39;date&#39;: &#39;2017-12-16&#39;
       }]
      },
      computed: {
       classOption: function () {
        return {
         step: 0.5,
         limitMoveNum: 5
        }
       }
      }
     })
    </script>
  </body>
</html>
登录后复制
<html>
<head>
 ...
</head>
<body>
 <p id="app">
  <vue-seamless-scroll></vue-seamless-scroll>
 </p>
 <script src="vue.js"></script>
 <script src="vue-seamless-scroll"></script>
 <script>
  new Vue({
   el: &#39;#app&#39;
  })
 </script>
</body>
</html>
登录后复制

Configure

 defaultOption () {
    return {
     step: 1, //步长 越大滚动速度越快
     limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
     hoverStop: true, //是否启用鼠标hover控制
     direction: 1, //1 往上 0 往下
     openWatch: true, //开启data实时监听
     singleHeight: 0, //单条数据高度有值hoverStop关闭
     waitTime: 1000 //单步停止等待时间
    }
   }
登录后复制

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详细解读Vuejs中响应式原理

在Javascript中的有关class、构造函数、工厂函数的使用方法

使用nodeJS如何实现微信分享

在Vue.js中如何使用移动组件库（详细教程）

在Angular2中如何去除url中的#号（详细教程）

以上是使用vue如何实现无缝滚动组件的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
vue 无缝滚动
来源：php.cn
上一篇：在knockoutjs上如何实现flux 下一篇：有关JavaScript数组操作难点（详细教程）
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在模板中使用在方法中定义的变量 这是我第一次使用Vue（v2而不是v3），并且我一直在尝试在模板内使用变量（在方法内定义）。我的简化代码：<template><divclass="co...
来自于 2024-04-06 18:10:25
0
2
513
使用 Firebase 在 Vue 中创建用户，无需登录 我创建了一个表单来创建用户配置文件。但每当我创建用户时我都会遇到问题。已登录并已登录用户注销。请帮忙解决这个问题。constsuccessCreate=()=>{create...
来自于 2024-04-06 14:20:12
0
1
514
解决Vue3 webcomponents生产构建问题 我正在尝试将我的vue2web组件迁移到vue3，尽管当我为生产创建构建时问题就出现了。我将vue-cli与--targetwc一起使用，它现在显示一个错误，指出vue3Web组件...
来自于 2024-04-06 12:43:37
0
1
473
vue vee-validate 捕获日期选择器选择的问题 我的日期选择器字段上的v-model绑定无法正常工作。当您做出选择时，它将在屏幕上实时更新，但它不会将值存储在formValues反应对象中。由于vee-validate不支持日期...
来自于 2024-04-06 11:38:56
0
1
510
有没有办法在vue中设置route prop？ 我想导航到页面中的特定选项卡this.$router.push({name:"AdminNotifications",params:{tab:"req...
来自于 2024-04-06 11:35:59
0
1
456
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板