Native Package Manager

    vue-news-scroll

    1.0.6 • Public • Published

    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

    Install

    npm i vue-news-scroll

    DownloadsWeekly Downloads

    8

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    136 kB

    Total Files

    15

    Last publish

    Collaborators

    • liqin95