zoukankan      html  css  js  c++  java
  • vue实现循环滚动列表

    本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下

    1.安装

    vue-seamless-scroll   实例文档链接

    1
    cnpm install vue-seamless-scroll --save

    2.文件中引入,组件配置

    1
    import vueSeamlessScroll from 'vue-seamless-scroll'

    3.使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    <template>
      
     <vue-seamless-scroll :data="CardPartsStatisticsList" class="seamless-warp" :class-option="classOption">
     <ul>
     <li class="DataList_top" v-for="(item,index) in CardPartsStatisticsList" :key="index" v-if="index < 5">
     <div class="DataList_left">{{index+1}}</div>
     <div class="DataList_left">{{item.itemname}}</div>
     <div class="DataList_left">{{item.number}}</div>
     </li>
     </ul>
     </vue-seamless-scroll>
      
    </template>
      
    <script>
    import vueSeamlessScroll from 'vue-seamless-scroll'
    export default {
     data() {},
     components: { //组件
     vueSeamlessScroll
     },
     computed: {
      
     classOption () {
     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)
     }
     }
     },
    }
      
      
    </script>
      
      
    <style>
    .seamless-warp{
      100%;
     height: calc(100% - 16px);
     overflow: hidden;
    }
    </style>
  • 相关阅读:
    Dockerfile深度剖析
    centos 7安装jdk8
    Centos 7 修改YUM镜像源地址为阿里云镜像地址
    Fabric智能合约(余额转移样本)
    Fabric智能合约(base)
    Fabric背书策略文件编写说明
    多catch块折叠
    Frp内网穿透服务部署
    Linux常用命令合集(初级)--Centos版
    English trip EM3-LP-5A Shopping Teacher: GABRIELE
  • 原文地址:https://www.cnblogs.com/qiunanyan/p/14462512.html
Copyright © 2011-2022 走看看