Vue news scroll

A Vue.js project

Version: 1.0.6 Updated: 09/04/2019

By: liqin1059 License: MIT

Downloads Last 30 Days: 104

vue-news-scroll

NPM version

  • 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出来效果有点卡顿,实际没有,我也不知道为什么

avatar

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

Categories: Vue js