使用vue如何实现无缝滚动组件-js教程-PHP中文网

首页

web前端

js教程

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

亚连

Jun 20, 2018 pm 01:50 PM

vue无缝滚动

本篇文章主要给大家讲解了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中文网其他相关文章！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

See all articles