zoukankan      html  css  js  c++  java
  • 文字滚动插件

    安装:npm install vue-seamless-scroll --save

    main.js页面引用:

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

    实例:

     1 <template>
     2     <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
     3         <ul class="item">
     4             <li v-for="item in listData">
     5                 <span class="title" v-text="item.title"></span>
     6             </li>
     7         </ul>
     8     </vue-seamless-scroll>
     9 </template>
    10 <style lang="scss" scoped>
    11     .seamless-warp {
    12         height: 229px;
    13         overflow: hidden;
    14     }
    15 </style>
    16 <script>
    17     export default {
    18         data () {
    19             return {
    20                 listData: [{
    21                    'title': '无缝滚动第一行无缝滚动第一行',
    22                  }, {
    23                     'title': '无缝滚动第二行无缝滚动第二行',
    24                  }, {
    25                      'title': '无缝滚动第三行无缝滚动第三行',
    26                  }, {
    27                      'title': '无缝滚动第四行无缝滚动第四行',
    28                  }, {
    29                      'title': '无缝滚动第五行无缝滚动第五行',
    30                  }]
    31                 }
    32             },
    33             computed: {
    34                 optionHover () {
    35                     return {
    36                             hoverStop: false //鼠标悬停关闭
    37 
    38                             singleWidth: 0, // 单行停顿的宽度(默认值0是无缝不停止的滚动)  
    39 
    40                             singleHeight:26//单行停顿间距(不需要停顿不设置)
    41 
    42                             waitTime: 2500//单行停顿时间(不需要停顿不设置)
    43 
    44                             step: 0.5//向上滚动不停顿
    45 
    46                              limitMoveNum: 2, // 开始无缝滚动的数据量 
    47 
    48                              direction: 0, // 0向下 1向上 2向左 3向右
    49 
    50                              openWatch: true, // 开启数据实时监控刷新dom                             
    51 
    52                         }
    53                 }
    54              }
    55        }
    56 </script>
  • 相关阅读:
    oracle拼接函数:将多个字段拼接在一行显示
    Source Insight 自定义命令说明
    harview .har文件解析
    GSM设备和网络错误代码
    mknod 创建设备
    linux下的usb抓包方法
    一些函数
    vmware 软件打开 自动开启虚拟机(快捷方式)
    Unix下C程序内存泄漏检测工具Valgrind安装与使用
    windows vmware 系统自启动
  • 原文地址:https://www.cnblogs.com/CinderellaStory/p/13882995.html
Copyright © 2011-2022 走看看