vue-list-marquee

vue-list-marquee

基于vue2的列表滚动插件

特点1：滚动方向，自下而上；
特点2：当列表内容超过列表高度，自动滚动，否则，不滚动；
特点3：如果滚动，则首尾无缝拼接；

Demo演示:

NPM

npm install vue-list-marquee --save

Mount

• mount with global

import Vue from 'vue'
// require styles
import 'vue-list-marquee/dist/vue-list-marquee.css'
import VueListMarquee from 'vue-list-marquee'
Vue.use(VueListMarquee)

• mount with component

// require styles
import 'vue-list-marquee/dist/vue-list-marquee.css'
import { VueListMarquee } from 'vue-list-marquee'
export default {
  components: {
    VueListMarquee
  }
}

Usage

<vue-list-marquee class='my-marquee' :listData='myList' :option='myOption'>
  <template slot-scope="{ item, index }">

    <!-- 每一条内容的结构 -->
    <div class="list-item">
      <div class='col1'>-{{index}}-</div>
      <div class='col2' :title="item.content">{{item.content}}</div>
    </div>

  </template>
</vue-list-marquee>

Demo参考:

https://github.com/hz-ljq/vue-list-marquee/blob/master/src/components/Demo.vue

Props

Name	Type	Default	Description
:listData	Array	[]	列表内容数组
:option	Object	moveTime: 1000, needRestTime: true, restTime: 2000, needHover: false, delayTime: 3000, timingFunc: 'linear'	配置项

:option（Detail explanation）

Name	Type	Default	Description
moveTime	Number	1000（单位：ms）	滚动一个条目高度的过渡时间；
needRestTime	Boolean	true	每滚动一个条目，是否需要停顿；如果为false，restTime属性将无效；
restTime	Number	2000（单位：ms）	每滚动一个条目后的停顿时间(尽量大于100，否则效果不好)，needRestTime为true时，才有效；
needHover	Boolean	true	当鼠标移入和移出时，是否需要暂停和继续滚动；
delayTime	Number	3000（单位：ms）	当滚动列表数据更新时，等待该延迟时间后，再进行滚动；
timingFunc	String	'linear'	速度曲线【可选值： linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier(n,n,n,n)】；当needRestTime为true时，才有效；

关于option.needRestTime属性：

• 设置为false：通过定时器，实现滚动效果（不停顿）；

优点：以像素作为滚动粒度，当鼠标移入暂停滚动时，能观察到这个优点；
缺点：性能相对差一些，因为为了效果流畅，定时器时间间隔较短；

• （推荐）设置为true：定时器配合css3的transition过渡，实现每滚动一个条目就停顿一段时间的效果；

优点：性能相对好一些，因为定时器时间间隔较长，transition性能较高；
缺点：以单个条目的高度为滚动粒度，当鼠标移入暂停滚动时，能观察到这个问题；