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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
js从10种颜色中随机取色实现每次取出不同的颜色
Oct 23 Javascript
js实现同一页面可多次调用的图片幻灯切换效果
Feb 28 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
javascript设计模式之module(模块)模式
Aug 19 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
vue如何在自定义组件中使用v-model
May 14 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
layui 富文本图片上传接口与普通按钮 文件上传接口的例子
Sep 23 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之数据库操作详解及乱码解决!
2007/01/02 PHP
PHP开发需要注意的安全问题
2010/09/01 PHP
Yii2实现同时搜索多个字段的方法
2016/08/10 PHP
PHP编程计算文件或数组中单词出现频率的方法
2017/05/22 PHP
PHP设计模式之工厂模式详解
2017/10/24 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
php中的依赖注入实例详解
2019/08/14 PHP
JavaScript 10件让人费解的事情
2010/02/15 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
2种jQuery 实现刮刮卡效果
2015/02/01 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
JavaScript里 ==与===区别详解
2016/08/16 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
如何正确理解javascript的模块化
2017/03/02 Javascript
深入理解JavaScript 参数按值传递
2017/05/24 Javascript
详解Angular4中路由Router类的跳转navigate
2017/06/09 Javascript
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
2018/08/19 Javascript
vue element自定义表单验证请求后端接口验证
2019/12/11 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
微信小程序中的上拉、下拉菜单功能
2020/03/13 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
python+django快速实现文件上传
2016/10/24 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
Gweniss格温妮丝女包官网:英国纯手工制造潮流包包品牌
2018/02/07 全球购物
Vichy薇姿加拿大官网:法国药妆,全球专业敏感肌护肤领先品牌
2018/07/11 全球购物
大学生社团活动总结
2014/04/26 职场文书
2015年教师教学工作总结
2015/04/28 职场文书
2015初中生物教研组工作总结
2015/07/21 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书
表扬信范文
2019/04/22 职场文书
教你如何使用Python开发一个钉钉群应答机器人
2021/06/21 Python