专栏首页vue的实战vue-seamless-scroll 实现页面的无缝滚动

vue-seamless-scroll 实现页面的无缝滚动

  • 第一步: 安装
cnpm install vue-seamless-scroll -s
  • 第二步: 在main.js中引入
/ 无缝滚动插件
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//or you can set componentName default componentName is vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
  • 第三步: 在vue的组件使用
<div class="mainBox">
            <vue-seamless-scroll :data="listData" :class-option="optionSingleHeightTime" 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>
        </div>

数据绑定:

    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'
                    }],

设置滚动的样式:

 computed: {

            optionSingleHeightTime() {
                return {
                    // singleHeight: 26,
                    // waitTime: 2500,

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

                }
            },
          

        },

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • 日访问百万级微信小程序优化技巧总结

    之前负责的锡慧在线小程序是一款公益性质在线教育类小程序,因疫情影响导致流量暴增,日访问过百万

    薛定喵君
    小程序微信缓存RedisCanvas
  • Spiral: 一个性能卓越的PHP/Golang混合开发框架

    春节期间,了解到一个“全新”的 WEB 开发框架:Spiral, 最开始引起我的兴趣是从同事那里听说了 RoadRunner. 然后去了解 RoadRunner 的时候看到了 Spiral. 之所以把“全新”用双引号引起来,是因为这个框架其实从 2013 年起就在它的开发团队以及一些企业客户中应用了,经历了各种实际应用场景的考验,Spiral 的功能及其丰富,性能与当前主流的 PHP 框架相比也相当出众。但这个框架源自俄国,在国内不算知名,他们团队开始重视和梳理开源,也应该是才开始的事情。

    小李刀刀
    PHPGoSymfony
  • kubernetes系列教程(二十)prometheus提供完备监控系统

    上一个章节中kubernetes系列教程(十九)使用metric-server让HPA弹性伸缩愉快运行介绍了在kubernetes中的监控架构,通过安装和使用metric-server提供kubernetes中的核心监控指标:提供node节点和pod容器CPU和内存的监控能力,核心监控指标提供的监控维度和指标相对有限,需要更好的扩展监控能力,需要使用自定义监控来实现,本文介绍prometheus提供更更加丰富的自定义监控能力。

    HappyLau谈云计算
    Kubernetes容器微服务云监控
  • 如何将设计思维应用到精益初创公司的软件开发

    我们所说的设计思维,是指由 IDEO 公司的 Tim Brown 提出,并且正在改变全世界组织的设计思维,简称 DT。(译者注:IDDO,当代最具影响力的设计公司之一)

    Aceyclee
    Serverless无服务器云函数
  • InnoDB 事务加锁分析

    一般大家对数据库事务的了解可能停留在事务的ACID特性以及事务4种不同的隔离级别层面上,而对于事务 4 种不同隔离级别如何实现了解相对较少。

    2020labs小助手
    MySQLSQL数据库MVCMVCC
  • FutureTask 核心源码解析

    研究源码,一般我们都从整体以及实例先入手,再研究细节,不至于一开始就“深陷其中而"当局者迷".

    JavaEdge
    HTTPJava
  • 200行代码落地人脸识别开锁应用

    2019年国庆,帮朋友实现了一个人脸识别进行开锁的功能,用在他的真人实景游戏业务中。几个月来运行稳定,体验良好,借着这个春节宅家的时间,整理一下这个应用的实现过程。

    高树磊
    人脸识别图像处理
  • 滑动验证码攻防对抗

        在业务安全领域,滑动验证码已经是国内继,传统字符型验证码之后的标配。众所周知,打码平台和机器学习这两种绕过验证码的方式,已经是攻击者很主流的思路,不再阐述。冷渗透介绍的是一个冷门的绕过思路和防御方案。这些积累,均来自于实战之中,希望有用。

    周俊辉
    HTTP网络安全安全网站
  • 程序员进阶必读,万字总结Mysql优化精华篇

    price decimal(8,2)有2位小数的定点数,定点数支持很大的数(甚至是超过int,bigint存储范围的数)

    程序员内点事
    全文检索缓存SQL数据库Python
  • 运维转型 | 运维人不再只是“救火英雄”

    各行各业都开启了数字化转型的进程,运维团队在这种时代的浪潮中又该何去何从?我在帮助一些企业落地了运维技术平台之后,开始反思这个问题,并将所思所想整理成本篇文章。

    嘉为科技
    企业运维自动化云计算

扫码关注云+社区

领取腾讯云代金券