一、vue-seamless-scroll是什么？

vue-seamless-scroll是一个基于Vue.js的简单无缝滚动组件, 基于requestAnimationFrame实现,配置多满足多样需求。目前支持上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

二、使用步骤

1.引入库

//npm
npm install vue-seamless-scroll --save

2.引入组件

//全局注册
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)

//按需引入
import VueSeamless"vue-seamless-scroll";export default {components: {VueSeamless,},
}

3.渲染页面

<div id="apps" style="height: 300px; overflow: hidden"><VueSeamless:data="cityData":class-option="cityOption"><divclass="scorll-content"v-for="(item) in cityData":key="item.value"><div>{{ item.name }}---Top{{item.value}}</div></div></VueSeamless></div>

<script>
import VueSeamless from "vue-seamless-scroll";export default {components: {VueSeamless,},data() {return {cityData: [{ name: "北京市", value: "1" },{ name: "上海市", value: "2" },{ name: "曹县", value: "3" },{ name: "深圳市", value: "4" },{ name: "广州市", value: "5" },{ name: "南京市", value: "6" },{ name: "成都市", value: "7" },{ name: "郑州市", value: "8" },{ name: "天津市", value: "9" },{ name: "香港", value: "10" },{ name: "武汉市", value: "11" },{ name: "西安市", value: "12" },],};},computed: {// 公告滚动自定义cityOption() {return {step: 1, // 数值越大速度滚动越快limitMoveNum: 4, // 开始无缝滚动的数据量 this.cityData.lengthhoverStop: true, // 是否开启鼠标悬停stopdirection: 1, // 0向下 1向上 2向左 3向右openWatch: true, // 开启数据实时监控刷新domsingleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3waitTime: 1000, // 单步运动停止的时间(默认值1000ms)};},},
};
</script>

完

vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能相关推荐

vue轮播组件--不插电手动粘贴版
概述轮播的原理是每一帧都选出一个当前元素,前一个元素,后一个元素然后排成一行,最后改变这三个元素的translate来触发css3的transition进行动画,当有touch事件的时候,要实时改变 ...
vue上下轮播组件简单实现
在vue社区里面没有找到特别好的上下轮播插件,基本都是图片的左右播放插件,质量也是参差不齐在实现这个组件之前,先抛出一个问题,如何在vue中实现dom的环形结构? 首先来看轮播组件的思路红色部分: ...
vue 实现无限轮播_使用Vue制作图片轮播组件思路详解
之前一直都没有认真的写过一个组件.以前在写业务代码的过程中,都是用的别人封装好的组件,这次尝试着写了一个图片轮播组件,虽然比不上知名的轮播组件,但它的功能基本完整,而且在写这个组件的过程中,学的东西也 ...
Vue——图片轮播组件
Notices: 这是我一个项目中的一个子组件,要展示的数据.图片地址等的都在父组件data中.所以后面的讲述都是基于从父组件获取的参数进行处理.(如需将这个SlideShow写成一个单独的主组件,将 ...
Vue.js-Day06-PM【项目实战(附带完整项目源码)-day01-pm：轮播组件（使用、安装依赖、具体操作过程）、favicon详细制作】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
HTML视频能不能做成轮播图,vue.js能做轮播图吗？
vue.js能做轮播图吗?答案是:可以.下面本篇文章给大家通过实例介绍一下使用vue.js做轮播图.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 最近新学习了vuejs,尝试着用v ...
基于移动端Reactive Native轮播组件的应用与开发详解
总结下这段时间学习reactive native的一些东西,我们来认识一下,被炒得这么火的rn,究竟是个什么东西,以及如何去搭建自己的demo. reactive native是什么由facebo ...
造轮子之图片轮播组件(swiper)
图片轮播是种很常见的场景和功能,一般移动网站首页的轮播 banner,商品详情页的商品图片等位置都会用到此功能像这种常用的场景功能肯定是有人早就写好插件了的,所以遇到这种场景,一般都遵循以下三步: ...
基于vue-strap的轮播组件，下载即用
Vue中的轮播组件在element UI中有提供,不知当初是基于何种原因使用了vue-strap中的轮播. 既然走上了这条不归路,好吧! 下面是基于vue-strap再开发的轮播组件,只需要改变ind ...

vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能

一、vue-seamless-scroll是什么？

二、使用步骤

1.引入库

2.引入组件

3.渲染页面

完

vue 轮播组件 vue-seamless-scroll简单用法/上下左右无缝滚动，单步滚动，以及支持水平方向的手动切换功能相关推荐

最新文章

热门文章