项目背景:基于vue的项目
昨天需要写一个效果,需要将数据自动轮播,然后鼠标移入时,轮播暂停。就像文字走马灯的效果类似。走马灯的效果可以使用css实现。
这里说一下我用的插件vue-seamless-scroll 这个插件将文字无缝滚动,单行停顿滚动都封装了一下,同时,这个插件同样可用在图片轮播的效果。还是很方便的。
示例代码地址:https://github.com/dreamITGirl/VueProgect/tree/master/project-demo/src/components/RidingLatern
具体效果如上图所示
vue-seamless-scroll文字无缝滚动的使用方法
1.项目引入
yarn add vue-seamless-scroll --save npm i vue-seamless-scroll --save
2.在vue文件中引入方式
①全局引入
import scroll from ‘vue-seamless-scroll‘
Vue.use(scroll)
②局部引入(大型项目的话,建议使用这种方式)
建议如果需求比较复杂,建议下载下来组件源码,放在组件中,这样后面可以修改源码,增加自己的需求,对组件再做二次封装
3.vue-seamless-scroll参数介绍
①:data="数组变量"
注:在<li>中需要用标签包住要显示的数据,如果<li>标签中没有子标签,整个的ul是不往上滚动的
同时如果seamless-wrap这个类名如果没有定义高度,整个的列表滚动时会看到ul重置回到原始位置的过程
<template> <vue-seamless-scroll :data="listData" class="seamless-warp"> <ul class="item"> <li v-for="item in listData"> <span class="title" v-text="item.title"></span><span class="date" v-text="item.date"></span> </li> </ul> </vue-seamless-scroll> </template> <style lang="scss" scoped> .seamless-warp { height: 229px; overflow: hidden; } </style> <script> export default { data () { return { listData: [{ ‘title‘: ‘无缝滚动第一行无缝滚动第一行‘, ‘date‘: ‘2017-12-16‘ }, { ‘title‘: ‘无缝滚动第二行无缝滚动第二行‘, ‘date‘: ‘2017-12-16‘ }] } } }
} </script>
② 设置速度、鼠标悬停效果、单行停顿、单行停顿时间需要设置在computed中。通过属性class-option设置
<vue-seamless-scroll :class-option="optionSetting"></vue-seamless-scroll>
computed:{ optionSetting(){ return { step:1,//速度,值越大,速度越快 hoverStop:false,//鼠标悬停效果,false为关闭该效果 singleHeight: 26,//单行停顿 waitTime: 2500,//单行停顿的时间 } } }
vue-seamless-scroll的主要用途可用在图片轮播,环形进度条,横向进度条的功能