1.安装

vue-seamless-scroll   实例文档链接

cnpm install vue-seamless-scroll --save

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

import vueSeamlessScroll from 'vue-seamless-scroll'

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实现循环滚动列表vue-seamless-scroll的更多相关文章

  1. Jquery制作--循环滚动列表

    自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可 ...

  2. jquery特效:无缝向上循环滚动列表

    效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1&l ...

  3. 用Vue来实现音乐播放器(十六):滚动列表的实现

    滚动列表是一个基础组件  他是基于scroll组件实现的 在base文件夹下面创建一个list-view文件夹 里面有list-view.vue组件     <template> < ...

  4. Vue.js——循环(Java、JSTL标签库、数据库)

    一.Vue.js循环 Vue.js循环要使用 v-for 指令. v-for 指令需要以 student in StudentList 形式的特殊语法使用, StudentList 是源数据数组并且s ...

  5. Vue组件封装之无限滚动列表

    无限滚动列表:分为单步滚动和循环滚动两种方式 <template> <div class="box" :style="{width:widthX,hei ...

  6. vue.js循环for(列表渲染)详解

    vue.js循环for(列表渲染)详解 一.总结 一句话总结: v-for <ul id="example-1"> <li v-for="item in ...

  7. 移动端无限滚动 TScroll.vue组件

    // 先看使用TScroll.vue的几个demo 1.https://sorrowx.github.io/TScroll/#/ 2. https://sorrowx.github.io/TScrol ...

  8. vue 原生添加滚动加载更多

    vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...

  9. Vue的自定义滚动,我用el-scrollbar

    弄了一个持续更新的github笔记,可以去看看,诚意之作(本来就是写给自己看的--)链接地址:Front-End-Basics 此篇文章的地址:Vue的自定义滚动,我用el-scrollbar 基础笔 ...

随机推荐

  1. js图形打印

    1. 打印等边三角形 document.writeln("打印三角形</br>"); for(var i=0;i<5;i++){ for(var j=5;j> ...

  2. 我的Python自学之路-001 列表的知识

    #_date_:2020/9/11 '''列表和字典是python中用的最多的数据类型 假如要存储一个班级的人名,需要怎么做?有这么几种方法:1.定义很多个变量: name0 = 'wucaho' n ...

  3. Linux实战(11):配置PPPOE拨号

    前言: 由于需要做网站数据的抓取,普通的固定代理会容易被封禁,所以我们就用PPPOE通过动态拨号换不同的IP地址来解决该问题,下面PPPOE设置的整个方法过程: 移除NetworkManager安装r ...

  4. JMeter5.0在windows(含插件安装)

    一.jmeter下载 前提:已经安装jdk8+ jmeter下载地址:http://jmeter.apache.org/download_jmeter.cgi 有Binaries和Source版本 前 ...

  5. POI和easyExcel

    POI与easyExcel 这个东西一般用来做什么? 将用户信息导出为Excel表格(导出数据) 将Excel表中的信息录入到网站数据库(比如一些习题上传) 在开发过程中会遇到对Excel的处理,比如 ...

  6. Zookeeper 笔记小结

    转自: https://www.cnblogs.com/raphael5200/p/5285583.html  1.Zookeeper的角色 » 领导者(leader),负责进行投票的发起和决议,更新 ...

  7. 自定义springboot - starter 实现日志打印,并支持动态可插拔

    1. starter 命名规则: springboot项目有很多专一功能的starter组件,命名都是spring-boot-starter-xx,如spring-boot-starter-loggi ...

  8. Redis小记(二)

    1.redis数据库 redis数据库属于内存数据库,若不将数据存到磁盘中,服务器进程退出,数据也会消失 redis所有数据库都保存在redisServer结构的db数组中,db数组的每一项都是一个r ...

  9. Redis 4.0.2分布式锁的Java实现

    简介 Redis分布式锁算法有两种,一种是单个Redis实例下的,一种是多个Redis实例的Redlock算法. 官方推荐Redlock算法,但是这个算法需要比较多的Redis实例而且是完全互相独立, ...

  10. Centos-切换用户身份-su

    su 切换用户身份 相关选项 - 加载相应用户下环境变量 -c   使用某个身份执行一个指令 -m  改变用户身份不改变环境变量 切换为超级用户 su - 普通用户切换为超级用户需要输入密码,超级用户 ...