vue实现循环滚动列表


Posted in Javascript onJune 30, 2020

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

vue实现循环滚动列表

1.安装

vue-seamless-scroll   实例文档链接

cnpm install vue-seamless-scroll --save

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

import vueSeamlessScroll from 'vue-seamless-scroll'

vue实现循环滚动列表

3.使用

<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{
 width: 100%;
 height: calc(100% - 16px);
 overflow: hidden;
}
</style>

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中的property和attribute介绍
Dec 26 Javascript
根据经纬度计算地球上两点之间的距离js实现代码
Mar 05 Javascript
javascript中字符串的定义示例代码
Dec 19 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
CSS3,HTML5和jQuery搜索框集锦
Dec 02 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
jQuery插件ajaxfileupload.js实现上传文件
Oct 23 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
jQuery实现表格文本框淡入更改值后淡出效果
Sep 27 Javascript
vue2.0 与 bootstrap datetimepicker的结合使用实例
May 22 Javascript
详解A标签中href=&quot;&quot;的几种用法
Aug 20 Javascript
移动端如何用下拉刷新的方式实现上拉加载
Dec 10 Javascript
js实现简单音乐播放器
Jun 30 #Javascript
angular中的post请求处理示例详解
Jun 30 #Javascript
vue开发简单上传图片功能
Jun 30 #Javascript
jquery实现上传图片功能
Jun 29 #jQuery
vue实现图片上传到后台
Jun 29 #Javascript
JS判断数组四种实现方法详解
Jun 29 #Javascript
vue实现整屏滚动切换
Jun 29 #Javascript
You might like
怎样使用php与jquery设置和读取cookies
2013/08/08 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
PHP URL路由类实例
2013/11/12 PHP
2014年10个最佳的PHP图像操作库
2014/07/14 PHP
详解如何实现Laravel的服务容器的方法示例
2019/04/15 PHP
扩展javascript的Date方法实现代码(prototype)
2010/11/20 Javascript
Underscore.js 的模板功能介绍与应用
2012/12/24 Javascript
利用javascript打开模态对话框(示例代码)
2014/01/11 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
2015/10/16 Javascript
jquery实现静态搜索功能(可输入搜索文字)
2017/03/28 jQuery
解决在Bootstrap模糊框中使用WebUploader的问题
2018/03/22 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
2018/05/08 Javascript
JS温故而知新之变量提升和时间死区
2019/01/27 Javascript
Three.js中矩阵和向量的使用教程
2019/03/19 Javascript
解决vue中axios设置超时(超过5分钟)没反应的问题
2020/09/04 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
Python完全新手教程
2007/02/08 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
python函数的万能参数传参详解
2019/07/26 Python
关于python3中setup.py小概念解析
2019/08/22 Python
python实现两个文件夹的同步
2019/08/29 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
英国珠宝网站Argento: PANDORA、Olivia Burton和Nomination等
2020/05/08 全球购物
教师专业理论水平的自我评价分享
2013/11/09 职场文书
自荐书范文范例
2014/02/13 职场文书
党风廉政建设责任书
2014/04/14 职场文书
学校师德承诺书
2014/05/23 职场文书
商场周年庆活动方案
2014/08/19 职场文书
公司新人试用期自我评价
2014/09/17 职场文书
小学校园广播稿集锦
2014/10/04 职场文书
2014年反洗钱工作总结
2014/11/22 职场文书