vue 左右循环滑动_vue实现无缝滚动循环

大家好，我是一叶，最近做的项目用到循环滚动展示，在这里踩的坑和大家分享一下。一开始写的时候没打算用组件(其实是没找到)，思路也很简单。把数据遍历之后，用js获取到可视范围的宽高，再逐次减去他的顶部高度，即可实现滚动的效果。怎么实现循环呢，数据跑一遍之后，会形成一段空白，只要我们再遍历一次数据，把高度掩盖，这样就可以达到首尾相接的循环效果(顿时感觉要起飞)。后来基于现实的需要，也就是这样做会造成CPU的浪费，没必要跑两次数据。

经过多方考证(从git上找到了组件)，决定采用vue-seamless-scroll来实现数据的滚动。至于怎么好用我就不打广告了，谁用谁知道。

组件使用地址：

可以参考里面例子，你想要的他懂你。

命令行执行：

npm install vue-seamless-scroll --save

然后在main.js中引用：

import scroll from 'vue-seamless-scroll'

Vue.use(scroll)

接下来在页面里引用该组件。

引入代码，在html里如图1所示。

图1(点击查看大图)

为了实现效果，还得在css里设置一下，给他一个初始高度，因为.scroll的父类设置过高度，所以这里height：100%，具体得看自己项目而来。

.scroll{

height: 100%;

overflow: hidden;

}

在js里，引入vue-seamless-scroll，代码如下：

import vueSeamlessScroll from 'vue-seamless-scroll'

在components里声明一下

components: {

vueSeamlessScroll

如图1所示，classOption()被圈了出来，classOption()里是循环所需要的参数，具体参数如下：

computed: {

classOption() {

return {

step: 1, // 数值越大速度滚动越快

limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length

hoverStop: false, // 是否开启鼠标悬停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)

};

}

代码简单并且已经注释过，所以我就不赘述了。

最终效果如图2所示。

图2

因为本文主要是说的是vue-seamless-scroll的用法，所以没有对axios进行阐述，如果感兴趣的朋友有疑问，或者认为本文有错误的地方欢迎大家留言，如果我没能及时看到，请及时联系我，博客里有我的联系方式。

axios的文章链接：

vue 左右循环滑动_vue实现无缝滚动循环相关推荐

Vue 之 vue-seamless-scroll 实现简单自动无缝滚动，且添加对应点击事件的简单整理
Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事件的简单整理目录 Vue 之 vue-seamless-scroll 实现简单自动无缝滚动,且添加对应点击事 ...
vue 左右循环滑动_vue实现循环滚动列表
本文实例为大家共享了vue实现循环滚动列表的详细代码,供大家参考,详细内容如下 1.安装 vue-seamless-scroll 实例文档链接 cnpm install vue-seamless- ...
vue项目中使用swiper 实现无缝滚动
1.安装swiper组件 npm install vue-awesome-swiper --save 2.main.js里引入组件,css(自己写样式的话则不用引) import VueAweso ...
vue改变标签属性_Vue用v-for给循环标签自身属性添加属性值的方法
我的代码结构如下所示不能执行,会出现报错 export default { data(){ return{ radio_arr:['循环1','循环2','循环3'], animal:'循环2' } ...
vue 选项卡可以滑动_vue实现选项卡及选项卡切换效果
这里不跟大家再去把Vue文档上的一些指令用法或者基础知识再复述一遍,既然是从入门到实战,我直接将平时项目中需要实现的一些效果拆分成模块.你们遇到了相关的指令或者不知道怎么用的方法自己对着文档去查,再回 ...
vue 文字上下循环滚动_基于 Vue 无缝滚动组件Vue-Seamless-Scroll
今天给小伙伴们推荐一款超棒的Vue无缝滚动组件VueSeamlessScroll. vue-seamless-scroll 基于 vue.js 构建的简单实用的无缝滚动组件.满足丰富的配置需求,支持上 ...
Vue无缝滚动轮播插件vue-seamless-scroll
示例一示例二安装 npm install vue-seamless-scroll --save main.js中引入: import scroll from 'vue-seamless-scro ...
vue vue-seamless-scroll 无缝滚动依赖
最近vue2项目中有使用文图和文字的无缝滚动场景,从网上看到有些挺有用的,特摘抄分享一下. 1.安装依赖 npm install vue-seamless-scroll --save 2.注册全局注 ...
[vue] 无缝滚动 vue-seamless-scroll 滚动表格
npm install vue-seamless-scroll --save main.js import scroll from 'vue-seamless-scroll' Vue.use(scro ...

vue 左右循环滑动_vue实现无缝滚动循环

vue 左右循环滑动_vue实现无缝滚动循环相关推荐

最新文章

热门文章