vue-marqueeli

下载

yarn add vue-marqueeli 

引入

import marqueeli from 'vue-marqueeli'
import 'vue-marqueeli/vue-marqueeli.css'

Vue.use(marqueeli);

使用

<marqueeView :height="90" >
            <marqueeItem><div>滚动内容一</div></marqueeItem>
            <marqueeItem><p>滚动内容2</p></marqueeItem>
            <marqueeItem><img src="@/assets/1.png" alt=""></marqueeItem>
            <marqueeItem v-for="item in 4" :key="item"><span>滚动内容4</span></marqueeItem>
            <marqueeItem><span>滚动内容5</span></marqueeItem>
            <marqueeItem><span>滚动内容6</span></marqueeItem>
            <marqueeItem><span>滚动内容7</span></marqueeItem>
</marqueeView>

参数说明

dir: {   //无缝滚动的方向
   type: String,
   default: 'top', //'top','down'，'left','right',
  },

  speedtime: {  //时间间隔
   type: Number,
   default: 40,
  },

  height: {   //容器高度 //当dir是‘left’,'right'时失效
   type: Number,
   default: 60,
  },

其他说明

当dir为top或者down时如果内容高度不够是不会滚动的当dir为left或者right时如果内容的宽度不够也不会滚动