zoukankan      html  css  js  c++  java
  • vue表格自动滚动

    安装依赖

    npm install vue-seamless-scroll --save
    1
    main.js文件里面引入使用

    import scroll from 'vue-seamless-scroll'
    Vue.use(scroll)
    1
    2
    html代码

    <template>
    <vue-seamless-scroll :data="listData" :class-option="optionHover" class="seamless-warp">
    <ul class="item">
    <li v-for="item in listData">
    <span class="title" v-text="item.title"></span>
    <span class="date" v-text="item.date"></span>
    </li>
    </ul>
    </vue-seamless-scroll>
    </template>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    css代码

    .seamless-warp {
    height: 500px;
    overflow: hidden;
    .item li{
    height: 50px;
    display: flex;
    span{
    flex: 1;
    text-align: center;
    line-height: 50px;
    color: #fff;
    }
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    js代码

    <script>
    export default {
    data () {
    return {
    listData: [{
    'title': '无缝滚动第一行无缝滚动第一行',
    'date': '2017-12-16'
    }, {
    'title': '无缝滚动第二行无缝滚动第二行',
    'date': '2017-12-16'
    }, {
    'title': '无缝滚动第三行无缝滚动第三行',
    'date': '2017-12-16'
    }, {
    'title': '无缝滚动第四行无缝滚动第四行',
    'date': '2017-12-16'
    }, {
    'title': '无缝滚动第五行无缝滚动第五行',
    'date': '2017-12-16'
    }, {
    'title': '无缝滚动第六行无缝滚动第六行',
    'date': '2017-12-16'
    }, {
    'title': '无缝滚动第七行无缝滚动第七行',
    'date': '2017-12-16'
    }, {
    'title': '无缝滚动第八行无缝滚动第八行',
    'date': '2017-12-16'
    }, {
    'title': '无缝滚动第九行无缝滚动第九行',
    'date': '2017-12-16'
    }]
    }
    }
    }
    </script>

  • 相关阅读:
    excel中如何筛选出同一列有重复的数据
    JTextFile换行
    DOM事件对象用法
    js事件监听
    webstorm 破解方法
    vux使用
    vue动态添加当前事件下的class
    subline3 如何设置es6高亮
    vueJS+ES6开发移动端APP实战项目笔记
    css命名规范和书写规范
  • 原文地址:https://www.cnblogs.com/yumingzhao/p/12771679.html
Copyright © 2011-2022 走看看