首页
所有分类
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 相关文章推荐
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
js获取ajax返回值代码
Apr 30 Javascript
Node.js实现兼容IE789的文件上传进度条
Sep 02 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 Javascript
JS实现的图片预览插件与用法示例【不上传图片】
Nov 25 Javascript
微信小程序 获取javascript 里的数据
Aug 17 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
Jan 25 jQuery
微信小程序之圆形进度条实现思路
Feb 22 Javascript
Vue中使用ElementUI使用第三方图标库iconfont的示例
Oct 11 Javascript
小程序云开发如何实现图片上传及发表文字
May 17 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
vue router返回到指定的路由的场景分析
Nov 10 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
#{}(1) S-2000(1) 小喇叭(1) 克隆(1) 外键(1) 增删查改(1) 脏读(2) 代理(2) SQL注入(2) IC-R9500(1)
You might like
追忆往昔！浅谈收音机的百年发展历史
2021/03/01 无线电
php $_ENV为空的原因分析
2009/06/01 PHP
PHP实现链式操作的原理详解
2016/09/16 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
自动更新作用
2006/10/08 Javascript
javascript jQuery插件练习
2008/12/24 Javascript
基于Asp.net与Javascript控制的日期控件
2010/05/22 Javascript
jquery 模拟类搜索框自动完成搜索提示功能(改进)
2010/05/24 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
DOM操作一些常用的属性汇总
2015/03/13 Javascript
node.js报错：Cannot find module 'ejs'的解决办法
2016/12/14 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
2017/06/11 jQuery
强大的JavaScript响应式图表Chartist.js的使用
2017/09/13 Javascript
JS实现的按钮点击颜色切换功能示例
2017/10/19 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
js new Date()实例测试
2019/10/31 Javascript
python使用递归解决全排列数字示例
2014/02/11 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
Python3.6使用tesseract-ocr的正确方法
2018/10/17 Python
Python3安装psycopy2以及遇到问题解决方法
2019/07/03 Python
Django中URL的参数传递的实现
2019/08/04 Python
python调用支付宝支付接口流程
2019/08/15 Python
介绍一下SQL Server的全文索引
2013/08/15 面试题
八项规定整改方案
2014/02/21 职场文书
法制宣传月活动方案
2014/05/11 职场文书
师德师风承诺书
2014/05/23 职场文书
产品委托授权书范本
2014/09/16 职场文书
科学育儿宣传标语
2014/10/08 职场文书
2014年体育部工作总结
2014/11/13 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
党员转正大会主持词
2015/07/02 职场文书
mysql优化之query_cache_limit参数说明
2021/07/01 MySQL
详解使用内网穿透工具Ngrok代理本地服务
2022/03/31 Servers
Java实战之课程信息管理系统的实现
2022/04/01 Java/Android