lc-marquee

走马灯组件，走马灯组件实现消息轮播提示

效果

使用方法

<template>
  <div class="wxc-demo">
    <scroller>
      <title title="lc-marquee"></title>
      <category title="marquee"></category>

      <lc-marquee
        :list="marquee.list"
        :index='1'
        :interval="marquee.interval"
        :duration="marquee.duration"
        @marqueeClick="marqueeClick">
      </lc-marquee>

    </scroller>
  </div>
</template>

<script>
  import LcMarquee from 'lighting-ui/packages/lc-marquee';
  import Title from 'lighting-ui/packages/_mods/title.vue';
  import Category from 'lighting-ui/packages/_mods/category.vue';
  import data from 'marquee.js'

  export default {
    components: { Title, Category, LcMarquee },
    data: function () {
      return {
        marquee: {
          duration: 1000,
          interval: 1000,
          list: data
        }
      }
    },
    methods: {
      marqueeClick(e){
        console.log(e)
      }
    }
  }
</script>

<style scoped>
  .wxc-demo {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background-color: #fff;
  }
  .margin{
    margin-top: 60px;
  }
  .mr{
    margin-right: 10px;
  }
</style>

marquee.js

let data = [
    {
        text: "一二三四五，上山打老虎",
        icon: "https://i.imgur.com/VG2CrTG.png"
    },
    {
        text: "三四五六七，老鹰抓小鸡",
        icon: "https://i.imgur.com/xSRHRhY.png"
    },
    {
        text: "五六七八九，警察抓小偷",
        icon: "https://i.imgur.com/VG2CrTG.png"
    },
    {
        text: "一二三四五，上山打老虎",
        icon: "https://i.imgur.com/xSRHRhY.png"
    },
    {
        text: "九十JQK, 34567",
        icon: "https://i.imgur.com/VG2CrTG.png"
    }
]
export default data;

可配置参数

Prop	Type	Required	Default	Description
duration	Number	N	1000	切换时动画时长
interval	Number	N	2000	消息展示时长
data	Array	y	-	包含icon 与 text 的消息

事件回调

//点击每条数据，返回索引值
@marqueeClick=""