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 相关文章推荐
基于jQuery实现的双11天猫拆红包抽奖效果
Dec 01 Javascript
javascript中Date format(js日期格式化)方法小结
Dec 17 Javascript
jquery 点击元素后,滚动条滚动至该元素位置的方法
Aug 05 Javascript
js判断价格,必须为数字且不能为负数的实现方法
Oct 07 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
关于jQuery.ajax()的jsonp碰上post详解
Jul 02 jQuery
angular动态删除ng-repaeat添加的dom节点的方法
Jul 20 Javascript
JS将网址url转化为JSON格式的方法
Jul 02 Javascript
详解如何在vue项目中使用lodop打印插件
Sep 27 Javascript
使用React手写一个对话框或模态框的方法示例
Apr 25 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 Javascript
Vue实现购物车实例代码两则
May 30 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导出oracle库的php代码
2009/04/20 PHP
php实现paypal 授权登录
2015/05/28 PHP
PHP中使用array函数新建一个数组
2015/11/19 PHP
PHP简单判断iPhone、iPad、Android及PC设备的方法
2016/10/11 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
PHP中引用类型和值类型功能与用法示例
2019/02/26 PHP
jquery实现居中弹出层代码
2010/08/25 Javascript
js实现图片放大缩小功能后进行复杂排序的方法
2012/11/08 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
使用jQuery动态加载js脚本文件的方法
2014/04/03 Javascript
jQuery头像裁剪工具jcrop用法实例(附演示与demo源码下载)
2016/01/22 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
基于js实现的限制文本框只可以输入数字
2016/12/05 Javascript
webpack配置文件和常用配置项介绍
2017/04/28 Javascript
jQuery常用选择器详解
2017/07/17 jQuery
详解jQuery同步Ajax带来的UI线程阻塞问题及解决办法
2017/08/09 jQuery
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
详解vue中组件参数
2018/07/09 Javascript
浅谈react性能优化的方法
2018/09/05 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
python pandas读取csv后,获取列标签的方法
2018/11/12 Python
python做接口测试的必要性
2019/11/20 Python
python实现控制台输出彩色字体
2020/04/05 Python
Tensorflow中批量读取数据的案列分析及TFRecord文件的打包与读取
2020/06/30 Python
python的dict判断key是否存在的方法
2020/12/09 Python
全球知名鞋履品牌授权零售商:Journeys
2016/09/17 全球购物
Linux常见面试题
2016/10/04 面试题
造型师求职自荐信
2013/09/27 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript