vue实现循环滚动列表
本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下
1.安装
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.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。
相关推荐
-
详解vue beforeEach 死循环问题解决方法
什么是beforeEach? beforeEach 是一个vue-router的路由导航钩子,一般我用它做路由守卫. 什么是路由守卫? 路由跳转前做一些验证,比如登录验证,是网站中的普遍需求.对此,vue-route 提供的beforeRouteUpdate可以方便地实现导航守卫(navigation-guards).导航守卫(navigation-guards)这个名字,听起来怪怪的,但既然官方文档是这样翻译的,就姑且这么叫吧.** 文档地址:https://router.vuejs.org/
-
Vue列表循环从指定下标开始的多种解决方案
最近遇到一个问题,在循环商品列表时,因为数组的第一个是商品的品牌介绍,所以循环时不能直接循环,只能从第二个元素开始. 方案1:从数据源头更改,后端直接在列表里去除第一个数组元素.但前端还是需要在别的地方展示品牌信息,故不好去除.(至于为何品牌信息需要和商品混合在一起,原因是业务问题.以前是给APP上展示的.) 方案2:循环时,列表切割 方案3:利用v-if,因为它的优先级低于v-for 方案4:利用method,返回新数组,其实也是切割和第二种类似 方案5:利用computed ps:下面看下v
-
解决vue中的无限循环问题
项目中遇到了这样一个问题:每一种产品有对应的服务费,每一个商家有多种商品要单独计算每一家的服务费,最后汇总总的服务费用.我直接写了一个方法来计算出每个商家和总的服务费用并return出来.如果不看控制台的话运行是没问题的.但是控制台报了无限循环的错误. 下面是错误代码 html: js: 这里会出现无限循环的原因是数据更新触发计算方法来更新视图,视图更新又反过来触发这个方法更新数据.所以尽量不要直接在绑定的数据上使用方法来绑定.找到问题后下面就是解决办法. 因为选中商品后就要重新计算价格.所以我
-
vue的for循环使用方法
vue是一套当下非常受欢迎的构建用户界面的渐进式框架.那如何使用vue进行数据循环呢?下面的案例将使用v-for循环进行数据的遍历. 1.打开html开发工具,新建一个html 代码页面. 2.在新建的html代码页面创建一个<ul>标签同时给这个标签设置一个id为app,然后在<ul>里创建一个<li>标签. 代码: <ul id="app"> <li></li> </ul> 3.引入vue.js.在
-
Vue中控制v-for循环次数的实现方法
在Vue中的遍历方法v-for控制循环次数的方法可以通过以下两种方法 1.截取循环的数据 v-for="(item,index) in domainList.slice(0, 2)" 用这样的方法可以截取循环的数据长度,从而控制循环的次数 2.通过v-if来控制 v-for="(item,index) in domainList" v-if="index<3" 在标签下紧跟v-if来进行控制,这里是用索引来进行控制的,所以循环的时候记得把i
-
vue实现循环滚动列表
本文实例为大家分享了vue实现循环滚动列表的具体代码,供大家参考,具体内容如下 1.安装 vue-seamless-scroll 实例文档链接 cnpm install vue-seamless-scroll --save 2.文件中引入,组件配置 import vueSeamlessScroll from 'vue-seamless-scroll' 3.使用 <template> <vue-seamless-scroll :data="CardPartsStatistic
-
基于vue实现循环滚动列表功能
注意:需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width. 先来介绍该组件的用法: 1.安装命令: cnpm install vue-seamless-scroll --save 2.main.js文件中作为全局组件引入 import scroll from 'vue-seamless-scroll' Vue.use(scroll) <vue-seamless-scroll :data="listD
-
vue实现循环滚动图片
本文实例为大家分享了vue实现循环滚动图片的具体代码,供大家参考,具体内容如下 效果(循环滚动,可切换方向): 轮播组件BaseSwiper.vue: <template> <div class="swiperBox"> <img class="imgLeft" @click="clickLeft" src="../../../assets/img/左.png" alt=&
-
Vue.js 无限滚动列表性能优化方案
问题 大家都知道,Web 页面修改 DOM 是开销较大的操作,相比其他操作要慢很多.这是为什么呢?因为每次 DOM 修改,浏览器往往需要重新计算元素布局,再重新渲染.也就是所谓的重排(reflow)和重绘(repaint).尤其是在页面包含大量元素和复杂布局的情况下,性能会受到影响.那对用户有什么实际的影响呢? 一个常见的场景是大数据量的列表渲染.通常表现为可无限滚动的无序列表或者表格,当数据很多时,页面会出现明显的滚动卡顿,严重影响了用户体验.怎么解决呢? 解决方案 既然问题的根源是 DOM
-
Jquery实现无缝向上循环滚动列表的特效
效果呈现 整个列表间隔设定的时间向上移动一个item的高度 html结构: <div class="slide-title"> <span>title1</span> <span>title2</span> <span>title3</span> </div> <div class="slide-container"><!--css设置时,注意高度是显示
-
多种JQuery循环滚动文字图片效果代码
自己模仿JQ插件的写法写了一个循环滚动列表插件,支持自定义上.下.左.右四个方向,支持平滑滚动或者间断滚动两种方式,都是通过参数设置.JQ里面有些重复的地方,暂时没想到更好的方法去精简.不过效果还是可以的,如下(效果图上传后都加速了,实际效果比这个要慢很多): html代码如下: <!doctype html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <
-
vue实现列表无缝循环滚动
本文实例为大家分享了vue实现列表无缝循环滚动的具体代码,供大家参考,具体内容如下 功能介绍: 在PC端网页,包括大数据.官网.后台管理平台开发中,可能会用到这种列表循环滚动的展示. 大致需求: 1.列表可以使用数组循环遍历:2.每隔几秒中列表数据向上滚动一定距离,展示下一条数据:3.滚动到最后一条数据时重新显示第一条开始的数据(类似走马灯.banner图的循环效果): 整体思路: 1.使用两个定时器嵌套实现:2.需要两个相同容器存放同样内容,实现无缝衔接效果: 效果展示: 完整代码: <!DO
-
Vue实现一种简单的无限循环滚动动画的示例
本文主要介绍了Vue实现一种简单的无限循环滚动动画的示例,分享给大家,具体如下: 先看实现效果: 这种类似轮播的效果,通常可以使用轮播的方案解决,只不过相对于我要分享的方案来说,轮播实现还是要复杂些的. Vue提供了一种过渡动画transition-group,这里我便是利用的这个效果 // template <transition-group name="list-complete" tag="div"> <div v-for="v i
-
vue实现公告消息横向无缝循环滚动
本文实例为大家分享了vue实现公告消息横向无缝循环滚动的具体代码,供大家参考,具体内容如下 该组件实现了公告消息的无缝横向滚动.我命名为marqueex.vue文件,感谢原来博主的分享,我自己做个总结 marqueex.vue <template> <div class="my-outbox"> <div class="my-inbox" ref='box'> <div class="my-list&q
-
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
需要在页面中一个小的区域循环滚动展示新闻(公告.活动.图片等等),并且,鼠标悬停时停止滚动并提示,离开后,继续滚动. 效果图: 上干货 html: 复制代码 代码如下: <div id="news"> <ul> <li><a href="#" title="aaaaaaaaaaaaaaa">aaaaaaaaaaaaaaa</a></li> <li><a h
随机推荐
- Perl 与 Python 之间的一些异同整理
- 服务器 安全检查要点[星外提供]
- Java 字符终端上获取输入三种的方式分享
- 详解Python Socket网络编程
- Android仿水波纹流量球进度条控制器
- 编程之显示/隐式声明
- JavaScript中为什么null==0为false而null大于=0为true(个人研究)
- Java模拟HTTP Get Post请求实现论坛自动回帖功能
- Java异常简介和架构_动力节点Java学院整理
- C++实现多线程查找文件实例
- Activity实例详解之启动activity并返回结果
- Android图片等比例缩放和填充屏幕效果
- PHP聚合式迭代器接口IteratorAggregate用法分析
- Python基于ThreadingTCPServer创建多线程代理的方法示例
- angular5 httpclient的示例实战
- axios使用拦截器统一处理所有的http请求的方法
- Linux下mysql 8.0安装教程
- springboot与redis的简单整合实例
- 详解Python 解压缩文件
- Android使用ViewPager实现滚动广告