lighting-ui/packages/lc-marquee/README_cn.md

A rich interaction, lightweight, high performance UI library based on Weex

# lc-marquee 

 > 走马灯组件
 
### 规则
- 走马灯组件实现消息轮播提示

## [Demo](http://res.lightyy.com/lightui/example/marquee/?_wx_tpl=http%3A%2F%2Fres.lightyy.com%2Flightui%2Fexample%2Fmarquee%2Findex.native.js)

<img src="./marquee.png" width="240"/>
<img src="./marquee-scan.png" width="160">

## 使用方法

```vue
<template>
  <div>
    <scroller>
      <title title="lc-marquee"></title>
      <category title="marquee"></category>

      <lc-marquee
        :list="marquee.list"
        :interval="marquee.interval"
        :duration="marquee.duration"
        :wrapperStyle="wStyle"
        :textStyle="tStyle"
        @change="marqueeChange">
      </lc-marquee>

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

<script>
  import { LcMarquee } from '../../index';
  import Title from '../_mods/title.vue';
  import Category from '../_mods/category.vue';
  import data from './data.js'

  export default {
    components: { Title, Category, LcMarquee },
    data: function () {
      return {
        marquee: {
          duration: 1000,
          interval: 1000,
          list: data
        },
        wStyle:{
          height: 48,
          backgroundColor: 'rgba(229,98,80,0.10)',
          borderRadius: 8,
          paddingLeft: 10,
          paddingRight: 10 
        },
        tStyle:{
            height: "24px",
            color: "#DE3B24",
            "font-size": "24px",
            "line-height": "24px"
        }
      }
    },
    methods: {
      marqueeChange: function (e) {
        console.log(e)
      }
    }
  }
</script>
```
>data.js
```javascript
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;
```

### API
| Prop | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:| :----------:|
| **`duration`** | `Number` | `N` | `1000` | 切换时动画时长 |
| **`interval`** | `Number` | `N` | `2000` | 消息展示时长 |
| **`data`** | `Array` | `y` | `-` | 包含icon 与 text 的消息 |
| **`wrapperStyle`** | `Object` | `N` | `-` | 跑马灯样式 |
| **`textStyle`** | `Object` | `N` | `-` | 跑马灯内文字样式 |