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 相关文章推荐
调整小数的格式保留小数点后两位
May 14 Javascript
js中的caller和callee属性介绍和例子
Jun 07 Javascript
jQuery异步加载数据并添加事件示例
Aug 24 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
jQuery实现点击任意位置弹出层外关闭弹出层效果
Oct 19 Javascript
javascript入门之window对象【新手必看】
Nov 22 Javascript
浅谈angular4生命周期钩子
Sep 05 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
jQuery选择器之基本选择器用法实例分析
Feb 19 jQuery
微信小程序获取当前时间及星期几的实例代码
Sep 20 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与javascript的两种交互方式
2006/10/09 PHP
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
laravel 解决groupBy时出现的错误 isn't in Group By问题
2019/10/17 PHP
js tab 选项卡
2009/04/26 Javascript
你必须知道的Javascript知识点之&quot;单线程事件驱动&quot;的使用
2013/04/23 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
jquery.hotkeys监听键盘按下事件keydown插件
2014/05/11 Javascript
jQuery子属性过滤选择器用法分析
2015/02/10 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
jquery动态增加删减表格行特效
2015/11/20 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
JS中frameset框架弹出层实例代码
2016/04/01 Javascript
JS常见算法详解
2017/02/28 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
2017/03/31 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
10行原生JS实现文字无缝滚动(超简单)
2018/01/02 Javascript
axios取消请求的实践记录分享
2018/09/26 Javascript
微信小程序利用button控制条件标签的变量问题
2020/03/15 Javascript
[01:02:02]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第二局
2016/02/25 DOTA
[01:09:23]KG vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python在非root权限下的安装方法
2018/01/23 Python
python 异或加密字符串的实例
2018/10/14 Python
python读取目录下所有的jpg文件,并显示第一张图片的示例
2019/06/13 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
解决CSS3的opacity属性带来的层叠顺序问题
2016/05/09 HTML / CSS
css3实现平移效果(transfrom:translate)的示例
2020/11/13 HTML / CSS
业务经理岗位职责
2013/11/11 职场文书
军训自我鉴定
2013/12/14 职场文书
国际贸易本科毕业生求职信
2014/09/26 职场文书
房屋租赁协议书(标准版)
2014/10/02 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
教师个人培训总结
2015/02/11 职场文书
安全主题班会教案
2015/08/12 职场文书
中职班主任培训心得体会
2016/01/07 职场文书
导游词之崇武古城
2019/10/07 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL