基于vue-seamless-scroll实现无缝滚动效果

基于vue-seamless-scroll实现无缝滚动效果

vue中,基于vue-seamless-scroll无缝滚动,供大家参考,具体内容如下

1、安装vue-seamless-scroll

npm install vue-seamless-scroll --save 

2、引入组件

全局引入在main.js中添加

import scroll from 'vue-seamless-scroll' Vue.use(scroll)

组件局部引入

<vue-seamless-scroll></vue-seamless-scroll> import vueSeamlessScroll from 'vue-seamless-scroll' components: {         vueSeamlessScroll },

3、配置参数

// 监听属性 类似于data概念 computed: {         defaultOption () {                 return {                     step: 0.2, // 数值越大速度滚动越快                     limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length                     hoverStop: true, // 是否开启鼠标悬停stop                     direction: 1, // 0向下 1向上 2向左 3向右                     openWatch: true, // 开启数据实时监控刷新dom                     singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1                     singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3                     waitTime: 1000 // 单步运动停止的时间(默认值1000ms)                 }             }         }, 

4、完整实例代码

<template>     <div class="" style="padding: 50px;">         <div class="page-example3" style="">             <vue-seamless-scroll :data="listData" :class-option="defaultOption" >                 <ul class="ul-scoll">                     <li v-for="(item, index) in listData" :key='index'>                         <span class="title">{{item.title}}:</span><span class="date">{{item.time}}</span>                     </li>                 </ul>             </vue-seamless-scroll>         </div>     </div> </template> <script>     import vueSeamlessScroll from 'vue-seamless-scroll'     export default {         name: 'Example3',         data() {             // 这里存放数据             return {                 listData: []             }         },         // import引入的组件需要注入到对象中才能使用         components: {             vueSeamlessScroll         },         // 监听属性 类似于data概念         computed: {             defaultOption () {                 return {                     step: 1, // 数值越大速度滚动越快                     limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length                     hoverStop: true, // 是否开启鼠标悬停stop                     direction: 1, // 0向下 1向上 2向左 3向右                     openWatch: true, // 开启数据实时监控刷新dom                     singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1                     singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3                     waitTime: 1000 // 单步运动停止的时间(默认值1000ms)                 }             }         },         // 方法集合         methods: {},         // 监控data中的数据变化         watch: {},         // 生命周期 - 创建完成(可以访问当前this实例)         created() {         },         // 生命周期 - 挂载完成(可以访问DOM元素)         mounted() {             for(let i = 0 ; i < 15 ; i++){                 let j = {                     title:'无缝滚动第几条啊啊啊-'+i,                     time: '2020-04-10'                 }                 this.listData.push(j)             }         }     } </script> <style scoped lang="scss">     //@import url(); 引入公共css类     .page-example3{         width: 400px;         height: 200px;         overflow: hidden;         border: 1px solid #283dff;         .ul-scoll{             li{                 margin: 6px;                 padding: 5px;                 background: rgba(198, 142, 226, 0.4);             }         }     } </style>

推荐阅读