vue 自动滚动,vue实现无限滚动

　　本文介绍了基于vue的循环滚动列表功能，以及该组件的使用方法。通过示例代码非常详细。请有需要的朋友参考一下。

　　注意：您需要给父容器一个高度和：data=Array 和overfolw:hidden；左右滚动需要ul容器的初始化css宽度。

　　我们先来介绍一下这个组件的用法：

　　1.安装命令：

　　cnpm安装vue-无缝-滚动-保存

　　2.在2.main.js文件中作为全局组件引入

　　从“vue无缝滚动”导入滚动

　　Vue.use(滚动)

　　vue-seamless-scroll:data= list data class= seamless-warp :class-option= default option

　　ul class=item

　　Li v-for= list data中的项目

　　 title v-text= item . title /span span class= date v-text= item . date /span

　　/李

　　/ul

　　/vue-无缝-滚动

　　Css代码：

　　style lang=scss 范围。无缝翘曲{

　　高度：229px

　　溢出：隐藏；

　　}

　　/风格

　　脚本

　　导出默认值{

　　data () {

　　返回{

　　列表数据：[{

　　Title :无缝滚动第一行，

　　日期： 2017-12-16

　　}, {

　　Title :无缝滚动第二行，

　　日期： 2017-12-16

　　}, {

　　标题:无缝滚动第三行，

　　日期： 2017-12-16

　　}, {

　　Title :无缝滚动第四行，

　　日期： 2017-12-16

　　}, {

　　Title :无缝滚动第五行，

　　日期： 2017-12-16

　　}, {

　　Title :无缝滚动第六行，

　　日期： 2017-12-16

　　}, {

　　Title :无缝滚动第七行，

　　日期： 2017-12-16

　　}, {

　　Title :无缝滚动第八行，

　　日期： 2017-12-16

　　}, {

　　Title :无缝滚动第九行，

　　日期： 2017-12-16

　　}]

　　}

　　}

　　}

　　/脚本

　　计算值：{

　　defaultOption() {

　　返回{

　　步长：0.6，//值越大，滚动速度越快。

　　Verstop: true，//要打开鼠标悬停停止吗？

　　方向：1，//0向下1向上2向左3向右

　　等待时间：1000 //单步运动停止的时间(默认值为1000毫秒)

　　}

　　}

　　}

　　效果如下：

　　关于基于vue实现循环滚动列表功能的文章到此为止。更多相关vue循环滚动列表内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。