【Vue】文本无缝滚动

作者: 德育处主任 | 来源:发表于2019-03-12 06:17 被阅读54次
    微信订阅号:Rabbit_svip


    先来看看官方效果


    微信订阅号:Rabbit_svip

    靠这个页面的底部,有一个黄色背景的“游侠攻略”,里面的文本是无缝向上滚动的。

    今天就来仿这个效果。


    由于懒,样式就不写了,只把大概思路写出来。

    【HTML部分】

    微信订阅号:Rabbit_svip

    【CSS部分】

    微信订阅号:Rabbit_svip

    【JS部分】

    微信订阅号:Rabbit_svip

    效果


    微信订阅号:Rabbit_svip

    data的数据这里用了死数据,真正项目中,这些数据都是通过ajax请求回来的。


    理解部分:

    每往上滚动一次,就要把当前排在第一行的文本移动到队伍的最后面。

    CSS:通过 animatedTop 建立一个向上滚动的动画。

    在JS部分,通过 showScroll 这个方法,控制数组。
    当改方法被执行,就会激活 animatedTop 类,激活这个动画。

    这个动画的执行时长是500毫秒,所以要改变数组的排序,就要在动画执行后才能改变,也就是延迟500毫秒才执行数组重排。

    微信订阅号:Rabbit_svip

    通过mounted这个钩子函数调用showScroll方法。

    最终得到上面例子的效果。

    相关文章

      网友评论

        本文标题:【Vue】文本无缝滚动

        本文链接:https://www.haomeiwen.com/subject/bfmwpqtx.html