vue-news-scroll

• vue 滚动消息插件👫
• 滚动样式
• 滚动时间间隔
• 滚动自定义插槽
• 支持异步获取滚动数据

npm

# npm install
npm install vue-news-scroll --save

引入

在main.js中引入

import vueNewsScroll from 'vue-news-scroll'
Vue.use(vueNewsScroll)

使用

滚动消息

<vue-news-scroll
  :listData="listData"
  :liStyle="liStyle"
  :rollTime="1600">
</vue-news-scroll>

| 参数 | 类型 | 备注 | 默认值 | | ------ | ------ | ------ | ------ | | listData | Array | 循环数据 | [] | | liStyle | Object | 循环数据样式（驼峰命名：backgroundColor） | {} | | rollTime | Number | 循环数据停顿时间 | 2000 | | slotShow | Boolean | 是否使用自定义插槽 | false |

使用自定义插槽

• 设置属性slotShow为true

<vue-news-scroll
  :listData="listData"
  :liStyle="liStyle"
  :slotShow="true"
  :rollTime="1600">
  <template slot-scope="scope">
    <div style="position:relative;">
      {{ scope.item.phone }}
      成功下单
      {{ scope.item.money }}元
      <span style="position:absolute;right:0;">
        {{ scope.item.time }}
      </span>
    </div>
  </template>
</vue-news-scroll>

属性举例

listData: [
  { money: '14000', name: '许小姐', phone: '157****7192', time: '1分钟前' },
  { money: '5000', name: '巢先生', phone: '136****6246', time: '2分钟前' }
]

liStyle: {
  backgroundColor: '#FFFFFF',
  color: '#C79446',
  fontSize: '14px',
  padding: '10px', // 最好设置一点padding
  paddingLeft: '40px',
  paddingRight: '40px'
}

效果展示

录制gif出来效果有点卡顿，实际没有，我也不知道为什么

源码地址：https://github.com/liqin1059/vue-news-scroll