当前位置：Gxlcms > JavaScript > 使用vue如何实现无缝滚动组件

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

时间：2021-07-01 10:21:17 帮助过：31人阅读

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

Installation

NPM

  1. npm install vue-seamless-scroll --save

Usage

ES6

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

  1. <template>
  2.   <p id="app">
  3.     <p class="fixed top-0 w-100 z-1 flex-none flex flex-row items-center pv3 ph4 bg-blue white">
  4.       <p class="flex-none"><a href="https://github.com/chenxuan0000/vue-seamless-scroll" rel="external nofollow" rel="external nofollow" rel="noopener"
  5.                    target="_blank" title="View on Github">
  6.         <svg xmlns="http://www.w3.org/2000/svg" fill="white" width="32" height="32" viewBox="0 0 16 16">
  7.           <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>
  8.         </svg>
  9.       </a>
  10.       </p>
  11.       <p class="flex-none" style="margin-left: 10px;"><a href="https://github.com/chenxuan0000/vue-seamless-scroll" rel="external nofollow" rel="external nofollow" 
  12.                    class="white no-underline underline-hover">vue-seamless-scroll</a></p>
  13.     </p>
  14.     <p class="pt5 f2" style="text-align: center;">无缝滚动demo</p>
  15.     <p class="flex wd800">
  16.       <p class="options" style="color:#357edd;">
  17.         <p><b>demo1</b> 向上无缝滚动,hover可停止</p>
  18.         var option = {<br/>
  19.               step: 0.5,<br/>
  20.               limitMoveNum: 5<br/>
  21.         }
  22.       </p>
  23.       <my-class :data="listData" :class-option="classOption" @copy-data="listData = listData.concat(listData)"
  24.            class="warp">
  25.         <ul class="item">
  26.           <li v-for="item in listData"><span class="title" v-text="item.title"></span><span class="date"
  27.                                                    v-text="item.date"></span>
  28.           </li>
  29.         </ul>
  30.       </my-class>
  31.     </p>
  32.     <p class="flex wd800">
  33.       <p class="options" style="color:#357edd;">
  34.         <p><b>demo2</b> limitMoveNum过大不滚动 开启了openWatch</p>
  35.         <p>3s后data增加到9条</p>
  36.         var option = {<br/>
  37.               limitMoveNum: 7<br/>
  38.         }
  39.       </p>
  40.       <my-class :data="listData1" :class-option="classOption1"
  41.            @copy-data="listData1 = listData1.concat(listData1)"
  42.            class="warp">
  43.         <ul class="item">
  44.           <li v-for="item in listData1"><span class="title" v-text="item.title"></span><span
  45.               class="date" v-text="item.date"></span></li>
  46.         </ul>
  47.       </my-class>
  48.     </p>
  49.     <p class="flex wd800">
  50.       <p class="options" style="color:#357edd;">
  51.         <p><b>demo3</b> limitMoveNum过大不滚动 关闭了openWatch</p>
  52.         <p>3s后data增加到9条</p>
  53.         var option = {<br/>
  54.               limitMoveNum: 7<br/>
  55.               openWatch: false<br/>
  56.         }
  57.       </p>
  58.       <my-class :data="listData2" :class-option="classOption2"
  59.            @copy-data="listData2 = listData2.concat(listData2)"
  60.            class="warp">
  61.         <ul class="item">
  62.           <li v-for="item in listData2"><span class="title" v-text="item.title"></span><span
  63.               class="date" v-text="item.date"></span></li>
  64.         </ul>
  65.       </my-class>
  66.     </p>
  67.     <p class="flex wd800">
  68.       <p class="options" style="color:#357edd;">
  69.         <p><b>demo4</b> 向下滚动,禁止了hover悬停</p>
  70.         var option = {<br/>
  71.               limitMoveNum: 5,<br/>
  72.               direction: 0,<br/>
  73.               hoverStop: false,<br/>
  74.         }
  75.       </p>
  76.       <my-class :data="listData3" :class-option="classOption3"
  77.            @copy-data="listData3 = listData3.concat(listData3)"
  78.            class="warp">
  79.         <ul class="item">
  80.           <li v-for="item in listData3"><span class="title" v-text="item.title"></span><span
  81.               class="date" v-text="item.date"></span></li>
  82.         </ul>
  83.       </my-class>
  84.     </p>
  85.     <p class="flex wd800">
  86.       <p class="options" style="color:#357edd;">
  87.         <p><b>demo5</b> 向上无缝滚动,单条停止一段时间</p>
  88.         var option = {<br/>
  89.               step: 0.5,<br/>
  90.               limitMoveNum: 5<br/>
  91.               singleHeight: 30,<br/>
  92.               waitTime: 1000<br/>
  93.         }
  94.       </p>
  95.       <my-class :data="listData4" :class-option="classOption4"
  96.            @copy-data="listData4 = listData4.concat(listData4)"
  97.            class="warp">
  98.         <ul class="item">
  99.           <li v-for="item in listData4"><span class="title" v-text="item.title"></span><span class="date"
  100.                                                     v-text="item.date"></span>
  101.           </li>
  102.         </ul>
  103.       </my-class>
  104.     </p>
  105.   </p>
  106. </template>
  107. <script>
  108.  import myClass from '../src/components/myClass.vue'
  109.  export default {
  110.   name: 'app',
  111.   data () {
  112.    return {
  113.     listData: [{
  114.      'title': '无缝滚动第一行无缝滚动第一行',
  115.      'date': '2017-12-16'
  116.     }, {
  117.      'title': '无缝滚动第二行无缝滚动第二行',
  118.      'date': '2017-12-16'
  119.     }, {
  120.      'title': '无缝滚动第三行无缝滚动第三行',
  121.      'date': '2017-12-16'
  122.     }, {
  123.      'title': '无缝滚动第四行无缝滚动第四行',
  124.      'date': '2017-12-16'
  125.     }, {
  126.      'title': '无缝滚动第五行无缝滚动第五行',
  127.      'date': '2017-12-16'
  128.     }, {
  129.      'title': '无缝滚动第六行无缝滚动第六行',
  130.      'date': '2017-12-16'
  131.     }, {
  132.      'title': '无缝滚动第七行无缝滚动第七行',
  133.      'date': '2017-12-16'
  134.     }, {
  135.      'title': '无缝滚动第八行无缝滚动第八行',
  136.      'date': '2017-12-16'
  137.     }, {
  138.      'title': '无缝滚动第九行无缝滚动第九行',
  139.      'date': '2017-12-16'
  140.     }],
  141.     listData1: [{
  142.      'title': '无缝滚动第一行无缝滚动第一行',
  143.      'date': '2017-12-16'
  144.     }, {
  145.      'title': '无缝滚动第二行无缝滚动第二行',
  146.      'date': '2017-12-16'
  147.     }, {
  148.      'title': '无缝滚动第三行无缝滚动第三行',
  149.      'date': '2017-12-16'
  150.     }, {
  151.      'title': '无缝滚动第四行无缝滚动第四行',
  152.      'date': '2017-12-16'
  153.     }, {
  154.      'title': '无缝滚动第五行无缝滚动第五行',
  155.      'date': '2017-12-16'
  156.     }, {
  157.      'title': '无缝滚动第六行无缝滚动第六行',
  158.      'date': '2017-12-16'
  159.     }],
  160.     listData2: [{
  161.      'title': '无缝滚动第一行无缝滚动第一行',
  162.      'date': '2017-12-16'
  163.     }, {
  164.      'title': '无缝滚动第二行无缝滚动第二行',
  165.      'date': '2017-12-16'
  166.     }, {
  167.      'title': '无缝滚动第三行无缝滚动第三行',
  168.      'date': '2017-12-16'
  169.     }, {
  170.      'title': '无缝滚动第四行无缝滚动第四行',
  171.      'date': '2017-12-16'
  172.     }, {
  173.      'title': '无缝滚动第五行无缝滚动第五行',
  174.      'date': '2017-12-16'
  175.     }, {
  176.      'title': '无缝滚动第六行无缝滚动第六行',
  177.      'date': '2017-12-16'
  178.     }],
  179.     listData3: [{
  180.      'title': '无缝滚动第一行无缝滚动第一行',
  181.      'date': '2017-12-16'
  182.     }, {
  183.      'title': '无缝滚动第二行无缝滚动第二行',
  184.      'date': '2017-12-16'
  185.     }, {
  186.      'title': '无缝滚动第三行无缝滚动第三行',
  187.      'date': '2017-12-16'
  188.     }, {
  189.      'title': '无缝滚动第四行无缝滚动第四行',
  190.      'date': '2017-12-16'
  191.     }, {
  192.      'title': '无缝滚动第五行无缝滚动第五行',
  193.      'date': '2017-12-16'
  194.     }, {
  195.      'title': '无缝滚动第六行无缝滚动第六行',
  196.      'date': '2017-12-16'
  197.     }, {
  198.      'title': '无缝滚动第七行无缝滚动第七行',
  199.      'date': '2017-12-16'
  200.     }, {
  201.      'title': '无缝滚动第八行无缝滚动第八行',
  202.      'date': '2017-12-16'
  203.     }],
  204.     listData4: [{
  205.      'title': '无缝滚动第一行无缝滚动第一行',
  206.      'date': '2017-12-16'
  207.     }, {
  208.      'title': '无缝滚动第二行无缝滚动第二行',
  209.      'date': '2017-12-16'
  210.     }, {
  211.      'title': '无缝滚动第三行无缝滚动第三行',
  212.      'date': '2017-12-16'
  213.     }, {
  214.      'title': '无缝滚动第四行无缝滚动第四行',
  215.      'date': '2017-12-16'
  216.     }, {
  217.      'title': '无缝滚动第五行无缝滚动第五行',
  218.      'date': '2017-12-16'
  219.     }, {
  220.      'title': '无缝滚动第六行无缝滚动第六行',
  221.      'date': '2017-12-16'
  222.     }, {
  223.      'title': '无缝滚动第七行无缝滚动第七行',
  224.      'date': '2017-12-16'
  225.     }, {
  226.      'title': '无缝滚动第八行无缝滚动第八行',
  227.      'date': '2017-12-16'
  228.     }, {
  229.      'title': '无缝滚动第九行无缝滚动第九行',
  230.      'date': '2017-12-16'
  231.     }],
  232.    }
  233.   },
  234.   computed: {
  235.    classOption () {
  236.     return {
  237.      step: 0.5,
  238.      limitMoveNum: 5
  239.     }
  240.    },
  241.    classOption1 () {
  242.     return {
  243.      limitMoveNum: 7
  244.     }
  245.    },
  246.    classOption2 () {
  247.     return {
  248.      limitMoveNum: 7,
  249.      openWatch: false
  250.     }
  251.    },
  252.    classOption3 () {
  253.     return {
  254.      limitMoveNum: 5,
  255.      direction: 0,
  256.      hoverStop: false
  257.     }
  258.    },
  259.    classOption4 () {
  260.     return {
  261.      step: 0.5,
  262.      limitMoveNum: 5,
  263.      singleHeight: 30,
  264.      waitTime: 1000
  265.     }
  266.    }
  267.   },
  268.   components: {
  269.    myClass
  270.   },
  271.   created () {
  272.    setTimeout(() => {
  273.     this.listData1 = this.listData2 = [{
  274.      'title': '无缝滚动第一行无缝滚动第一行',
  275.      'date': '2017-12-16'
  276.     }, {
  277.      'title': '无缝滚动第二行无缝滚动第二行',
  278.      'date': '2017-12-16'
  279.     }, {
  280.      'title': '无缝滚动第三行无缝滚动第三行',
  281.      'date': '2017-12-16'
  282.     }, {
  283.      'title': '无缝滚动第四行无缝滚动第四行',
  284.      'date': '2017-12-16'
  285.     }, {
  286.      'title': '无缝滚动第五行无缝滚动第五行',
  287.      'date': '2017-12-16'
  288.     }, {
  289.      'title': '无缝滚动第六行无缝滚动第六行',
  290.      'date': '2017-12-16'
  291.     }, {
  292.      'title': '无缝滚动第七行无缝滚动第七行',
  293.      'date': '2017-12-16'
  294.     }, {
  295.      'title': '无缝滚动第八行无缝滚动第八行',
  296.      'date': '2017-12-16'
  297.     }, {
  298.      'title': '无缝滚动第九行无缝滚动第九行',
  299.      'date': '2017-12-16'
  300.     }]
  301.    }, 3000)
  302.   }
  303.  }
  304. </script>
  305. <style lang="scss">
  306.   #app {
  307.     padding-bottom: 100px;
  308.   }
  309.   .flex-fill {
  310.     -ms-flex: 1 1;
  311.     flex: 1 1;
  312.   }
  313.   .options {
  314.     width: 300px;
  315.     font-size: 15px;
  316.     margin-right: 60px;
  317.     p {
  318.       color: #000;
  319.       margin-bottom: 30px;
  320.       b {
  321.         font-size: 16px;
  322.         font-style: italic;
  323.       }
  324.     }
  325.   }
  326.   .wd800 {
  327.     width: 800px;
  328.     margin: 30px auto;
  329.   }
  330.   .warp {
  331.     height: 260px;
  332.     width: 360px;
  333.     overflow: hidden;
  334.     ul {
  335.       list-style: none;
  336.       padding: 0;
  337.       margin: 0 auto;
  338.       li {
  339.         height: 30px;
  340.         line-height: 30px;
  341.         display: flex;
  342.         justify-content: space-between;
  343.         font-size: 15px;
  344.       }
  345.     }
  346.   }
  347.   @media screen and (max-width: 770px) {
  348.     .warp {
  349.       width: 90%;
  350.       margin: 0 auto;
  351.     }
  352.     body {
  353.       background-color: lightblue;
  354.     }
  355.     .wd800 {
  356.       width: 100%;
  357.     }
  358.     .flex.wd800 {
  359.       display: block;
  360.     }
  361.     .options {
  362.       width: 90%;
  363.       margin: 20px auto;
  364.       p {
  365.         margin-bottom:0;
  366.       }
  367.     }
  368.   }
  369. </style>
  1. import Vue from 'vue'
  2. import vueSeamlessScroll from 'vue-seamless-scroll'
  3. new Vue({
  4.  components: {
  5.   vueSeamlessScroll
  6.  }
  7. })

普通模式 (script tag)

Example:

  1. <!doctype html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport"
  6.        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.     <title>Document</title>
  9.     <style>
  10.       .warp {
  11.         height: 260px;
  12.         width: 360px;
  13.         overflow: hidden;
  14.       }
  15.       .warp ul {
  16.         list-style: none;
  17.         padding: 0;
  18.         margin: 0 auto;
  19.       }
  20.       .warp li {
  21.         height: 30px;
  22.         line-height: 30px;
  23.         display: flex;
  24.         justify-content: space-between;
  25.         font-size: 15px;
  26.       }
  27.     </style>
  28.   </head>
  29.   <body>
  30.     <p id="app">
  31.       <vue-seamless-scroll :data="listData" :class-option="classOption"
  32.                  @copy-data="listData = listData.concat(listData)"
  33.                  class="warp">
  34.         <ul class="item">
  35.           <li v-for="item in listData"><span class="title" v-text="item.title"></span><span class="date"
  36.                                                    v-text="item.date"></span>
  37.           </li>
  38.         </ul>
  39.       </vue-seamless-scroll>
  40.     </p>
  41.     <script src="https://cdn.bootcss.com/vue/2.5.9/vue.js"></script>
  42.     <script src="../dist/vue-seamless-scroll.min.js"></script>
  43.     <script>
  44.      new Vue({
  45.       el: '#app',
  46.       data: {
  47.        listData: [{
  48.         'title': '无缝滚动第一行无缝滚动第一行',
  49.         'date': '2017-12-16'
  50.        }, {
  51.         'title': '无缝滚动第二行无缝滚动第二行',
  52.         'date': '2017-12-16'
  53.        }, {
  54.         'title': '无缝滚动第三行无缝滚动第三行',
  55.         'date': '2017-12-16'
  56.        }, {
  57.         'title': '无缝滚动第四行无缝滚动第四行',
  58.         'date': '2017-12-16'
  59.        }, {
  60.         'title': '无缝滚动第五行无缝滚动第五行',
  61.         'date': '2017-12-16'
  62.        }, {
  63.         'title': '无缝滚动第六行无缝滚动第六行',
  64.         'date': '2017-12-16'
  65.        }, {
  66.         'title': '无缝滚动第七行无缝滚动第七行',
  67.         'date': '2017-12-16'
  68.        }, {
  69.         'title': '无缝滚动第八行无缝滚动第八行',
  70.         'date': '2017-12-16'
  71.        }, {
  72.         'title': '无缝滚动第九行无缝滚动第九行',
  73.         'date': '2017-12-16'
  74.        }]
  75.       },
  76.       computed: {
  77.        classOption: function () {
  78.         return {
  79.          step: 0.5,
  80.          limitMoveNum: 5
  81.         }
  82.        }
  83.       }
  84.      })
  85.     </script>
  86.   </body>
  87. </html>
  1. <html>
  2. <head>
  3.  ...
  4. </head>
  5. <body>
  6.  <p id="app">
  7.   <vue-seamless-scroll></vue-seamless-scroll>
  8.  </p>
  9.  <script src="vue.js"></script>
  10.  <script src="vue-seamless-scroll"></script>
  11.  <script>
  12.   new Vue({
  13.    el: '#app'
  14.   })
  15.  </script>
  16. </body>
  17. </html>

Configure

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

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

相关文章：

详细解读Vuejs中响应式原理

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

使用nodeJS如何实现微信分享

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

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

以上就是使用vue如何实现无缝滚动组件的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！