vue-list-marquee v1.0.48

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

:option（Detail explanation）

关于option.needRestTime属性：

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

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

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

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