首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue的无缝滚动组件vue-seamless-scroll实例

Posted in Javascript onDecember 18, 2017

vue的无缝滚动组件vue-seamless-scroll实例

Installation

NPM

npm install vue-seamless-scroll --save

Usage

ES6

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

<template>
  <div id="app">
    <div class="fixed top-0 w-100 z-1 flex-none flex flex-row items-center pv3 ph4 bg-blue white">
      <div 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>
      </div>
      <div 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></div>
    </div>
    <p class="pt5 f2" style="text-align: center;">无缝滚动demo</p>
    <div class="flex wd800">
      <div class="options" style="color:#357edd;">
        <p><b>demo1</b> 向上无缝滚动,hover可停止</p>
        var option = {<br/>
              step: 0.5,<br/>
              limitMoveNum: 5<br/>
        }
      </div>
      <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>
    </div>
    <div class="flex wd800">
      <div class="options" style="color:#357edd;">
        <p><b>demo2</b> limitMoveNum过大不滚动 开启了openWatch</p>
        <p>3s后data增加到9条</p>
        var option = {<br/>
              limitMoveNum: 7<br/>
        }
      </div>
      <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>
    </div>
    <div class="flex wd800">
      <div 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/>
        }
      </div>
      <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>
    </div>
    <div class="flex wd800">
      <div class="options" style="color:#357edd;">
        <p><b>demo4</b> 向下滚动,禁止了hover悬停</p>
        var option = {<br/>
              limitMoveNum: 5,<br/>
              direction: 0,<br/>
              hoverStop: false,<br/>
        }
      </div>
      <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>
    </div>
    <div class="flex wd800">
      <div 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/>
        }
      </div>
      <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>
    </div>
  </div>
</template>

<script>
 import myClass from '../src/components/myClass.vue'
 export default {
  name: 'app',
  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'
    }],
    listData1: [{
     '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'
    }],
    listData2: [{
     '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'
    }],
    listData3: [{
     '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'
    }],
    listData4: [{
     '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: {
   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 = [{
     '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'
    }]
   }, 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 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'

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>
    <div 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>
    </div>
    <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: '#app',
      data: {
       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'
       }]
      },
      computed: {
       classOption: function () {
        return {
         step: 0.5,
         limitMoveNum: 5
        }
       }
      }
     })
    </script>
  </body>
</html>
<html>
<head>
 ...
</head>
<body>
 <div id="app">
  <vue-seamless-scroll></vue-seamless-scroll>
 </div>
 <script src="vue.js"></script>
 <script src="vue-seamless-scroll"></script>
 <script>
  new Vue({
   el: '#app'
  })
 </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 //单步停止等待时间
    }
   }

TKS

vue-seamless-scroll发现bug或者有什么不足望指点,感觉不错点个star吧。

vue的无缝滚动组件vue-seamless-scroll实例

- Author -

laozhang

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript实现仿银行密码输入框效果的代码
Dec 13 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
JS函数重载的解决方案
May 13 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
Javascript简单实现面向对象编程继承实例代码
Nov 27 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
深入理解Angularjs中的$resource服务
Dec 31 Javascript
详解vue-router 初始化时做了什么
Jun 11 Javascript
JS实现关键词高亮显示正则匹配
Jun 22 Javascript
vue实现按需加载组件及异步组件功能
May 27 Javascript
Swiper.js实现移动端元素左右滑动
Sep 08 Javascript
分析JavaScript数组操作难点
Dec 18 #Javascript
微信小程序基于本地缓存实现点赞功能的方法
Dec 18 #Javascript
JavaScript模块详解
Dec 18 #Javascript
webpack打包js文件及部署的实现方法
Dec 18 #Javascript
react+redux的升级版todoList的实现
Dec 18 #Javascript
总结js中的一些兼容性易错的问题
Dec 18 #Javascript
详解最新vue-cli 2.9.1的webpack存在问题
Dec 16 #Javascript
XPathParser(1) Sentry(1) macos(1) 404(1) sout(1) Stater(1) csgo(1) xps(1) 403(1) CAD(1)
You might like
屏蔽机器人从你的网站搜取email地址的php代码
2012/11/14 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
基于php的CMS中展示文章类实例分析
2015/06/18 PHP
php文档工具PHP Documentor安装与使用方法
2016/01/25 PHP
PHP+sqlite数据库操作示例(创建/打开/插入/检索)
2016/05/26 PHP
PHP读取XML格式文件的方法总结
2017/02/27 PHP
浅谈PHP中的Trait使用方法
2019/03/22 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
用js小类库获取浏览器的高度和宽度信息
2012/01/15 Javascript
EasyUI 中 MenuButton 的使用方法
2012/07/14 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
Javascript中的return作用及javascript return关键字用法详解
2015/11/05 Javascript
jquery实现的table排序功能示例
2017/03/10 Javascript
微信小程序中的swiper组件详解
2017/04/14 Javascript
详解如何用模块化的方式写vuejs
2017/12/16 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
小程序实现横向滑动日历效果
2019/10/21 Javascript
Vue SPA 初次进入加载动画实现代码
2019/11/14 Javascript
python列表去重的二种方法
2014/02/14 Python
Django中传递参数到URLconf的视图函数中的方法
2015/07/18 Python
Python实现基于多线程、多用户的FTP服务器与客户端功能完整实例
2017/08/18 Python
pytorch 实现将自己的图片数据处理成可以训练的图片类型
2020/01/08 Python
Python多重继承之菱形继承的实例详解
2020/02/12 Python
css3media响应式布局实例
2016/07/08 HTML / CSS
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
Clarks西班牙官方在线商店：clarks鞋
2019/05/03 全球购物
建筑毕业生自我鉴定
2013/10/18 职场文书
简单英文演讲稿
2014/01/01 职场文书
个人承诺书
2014/03/26 职场文书
单位介绍信格式
2015/01/31 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL