vue2-无缝滚动组件-vue-seamless-scroll
vue 2021-10-05 22:03:59

 1、安装插件

C/C++ Code复制内容到剪贴板
  1. npm install vue-seamless-scroll --save  
  2.   
  3. 或者：  
  4.   
  5. yarn add vue-seamless-scroll  

 

 

VUE2 

引用

C/C++ Code复制内容到剪贴板
  1. import scroll from 'vue-seamless-scroll'  
  2. Vue.use(scroll)  

 

 

VUE3 （vite + vue3创建的不支持，因为require已经被丢弃，要额外解决这个问题，点击查看解决方案，当然，解决了也会有下一个问题，比如：requested module '/node_modules/comutils/animationFrame.js?v=32a94d73' does not provide an ...）

vue3强烈推荐 https://github.com/xiaofulzm/vue3-scroll-seamless

引用（vue3因为找不到路径了，所以要加src）

JavaScript Code复制内容到剪贴板
  1. import vueSeamless from 'vue-seamless-scroll/src'  

 

 

 

 

 

3、参数配置

参数 描述 默认值 参数类型

step 值越小滚动速度越快越快  1 Number

limitMoveNum 开始无缝滚动最小数据长度 5 Number

hoverStop 是否启用鼠标hover控制 true Boolean

direction 方向0 往下 1 往上 2向左 3向右 1 Number

openTouch 移动端开启touch滑动 true Boolean

singleHeight 单个停止高度（默认为零无缝）=>方向0/1 0 Number

singleWidth 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3 0 Number

waitTime 单步停止等待时间(默认值1000ms) 1000 Number

switchOffset 左右切换按钮距离左右边界的边距(px) 30 Number

autoPlay 是否自动播放开关需要设置为false true Boolean

switchSingleStep 手动单步切换step值(px) 134 Number

switchDelay 单步切换的动画时间(ms) 400 String

switchDisabledClass 不可以点击状态的switch按钮父元素的类名 disabled String

isSingleRemUnit singleHeight and singleWidth是否开启rem度量 false Boolean

 

4、代码应用

XML/HTML Code复制内容到剪贴板
  1.     <!-- 滚动公告 -->  
  2.     <div class="base-container-fluid base-bg-white">  
  3.       <div class="notice base-container base-flex base-rows base-align-items-center">  
  4.         <div class="title">清化公告</div>  
  5.         <vue-seamless-scroll  
  6.           :data="scrollList"  
  7.           :class-option="classOption"  
  8.           class="notice-scroll">  
  9.           <ul>  
  10.             <li v-for="(item,index) in scrollList" :key="index">{{ item.title }}</li>  
  11.           </ul>  
  12.         </vue-seamless-scroll>  
  13.       </div>  
  14.     </div>  
  15.   
  16.   
  17.   
  18. <script>  
  19. import vueSeamlessScroll from 'vue-seamless-scroll'  
  20.   
  21. export default {  
  22.     components: {  
  23.         vueSeamlessScroll  
  24.     },  
  25.     data () {  
  26.       return {  
  27.         scrollList: [  
  28.           {  
  29.             'id': 1,  
  30.             'title': '我是通知公告我是通知公告一'  
  31.           },  
  32.           {  
  33.             'id': 2,  
  34.             'title': '我是通知公告我是通知公告二'  
  35.           },  
  36.           {  
  37.             'id': 3,  
  38.             'title': '我是通知公告我是通知公告三'  
  39.           }  
  40.         ],  
  41.         classOption: {  
  42.           step: 0.3, // 数值越小速度滚动越慢  
  43.           limitMoveNum: 1, // 开始无缝滚动的数据量 this.dataList.length  
  44.           hoverStop: true, // 是否开启鼠标悬停stop  
  45.           direction: 1, // 0向下 1向上 2向左 3向右  
  46.           openWatch: false, // 开启数据实时监控刷新dom  
  47.           singleHeight: 30, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1  
  48.           singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3  
  49.           waitTime: 2000 // 单步运动停止的时间(默认值1000ms)  
  50.         }  
  51. ...  
  52.   
  53.   
  54.   
  55.   
  56.   
  57.   
  58. <style lang="less">  
  59.     .notice{  
  60.       height: 30px;  
  61.       line-height: 30px;  
  62.       .title{  
  63.         width: 160px;  
  64.         color: #FFF;  
  65.         font-size: 16px;  
  66.         margin-right: 30px;  
  67.         background: #38b3ee;  
  68.         text-align: center;  
  69.       }  
  70.       .notice-scroll{  
  71.         height: 30px;  
  72.         overflow: hidden;  
  73.         ul{  
  74.           li{  
  75.             height: 30px;  
  76.             line-height: 30px;  
  77.           }  
  78.         }  
  79.       }  
  80.     }  

 

 

 

5、展示结果

向上逐条滚动

注意：数据不够时，不滚动；

 

本文来自于：https://blog.csdn.net/niexier/article/details/108218096

上一篇 小程序接入腾讯云直播
下一篇 vue实现仿淘宝详情页商品轮播效果
相关的文章
Powered by yoyo苏ICP备15045725号