## 时间滚动组件
> **组件名：h-carousel-roll**

### 安装方式

本组件符合[easycom](https://uniapp.dcloud.io/collocation/pages?id=easycom)规范，`HBuilderX 2.5.5`起，只需将本组件导入项目，在页面`template`中即可直接使用，无需在页面中`import`和注册`components`。

### 基本用法

在 ``template`` 中使用组件

```html
<!-- 基本使用 -->
<h-carousel-roll :list="list"></h-carousel-roll>

<!-- 自定义标题文字 -->
<h-carousel-roll :list="list" text="校园新闻"></h-carousel-roll>

<!-- 自定义标题文字颜色 -->
<h-carousel-roll :list="list" textColor="#30b6a2"></h-carousel-roll>
<h-carousel-roll :list="list" textColor="#0079fe"></h-carousel-roll>

<!-- 字体是否开启渐变色 -->
<h-carousel-roll :list="list" :gradients="false"></h-carousel-roll>

<!-- 是否展示标题文字 -->
<h-carousel-roll :list="list" :textShow="false"></h-carousel-roll>

<!-- 是否展示时间 -->
<h-carousel-roll :list="list" :timeShow="false"></h-carousel-roll>

<!-- 自定义滚动数据标题字段 -->
<h-carousel-roll :list="list" title="title"></h-carousel-roll>

<!-- 自定义滚动数据标题颜色 -->
<h-carousel-roll :list="list" titleColor="#30b6a2"></h-carousel-roll>

<!-- 自定义滚动数据时间字段 -->
<h-carousel-roll :list="list" time="time"></h-carousel-roll>

<!-- 轮播自动切换时间间隔 -->
<h-carousel-roll :list="list" :interval="10000"></h-carousel-roll>
```

### 依赖

因使用了uview-ui 的api，所以需要引用

在 根目录下的 App.vue 文件中引入

```scss
<style lang="scss">
	@import "@/uni_modules/uview-ui/index.scss";
</style>
```

在 根目录下的 main.js 文件中引入

```js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)
uni.$u.config.unit = 'rpx'
```

在 根目录下的 uni.scss 文件中引入

```scss
@import '@/uni_modules/uview-ui/theme.scss';
```

## API

### Props

|  属性名	|  类型		| 默认值	|           说明			|
| :-------:	| :-----:	| :-----:	| :-----------------------:	|
| text       | String  | 通知公告 | 标题文字           |
| textShow   | Boolean | true     | 是否展示标题文字   |
| textColor  | String  | #f15723  | 标题文字颜色       |
| gradients  | Boolean | true     | 字体是否开启渐变色 |
| list       | Array   | -        | 滚动数据           |
| title      | String  | title    | 滚动数据标题字段   |
| titleColor | String  | #000000  | 滚动数据标题颜色   |
| time       | String  | time     | 滚动数据时间字段   |
| timeShow   | Boolean | true     | 是否展示时间       |

### Events

| 事件名 | 类型     | 回调参数           | 说明             |
| ------ | -------- | ------------------ | ---------------- |
| active | function | item（点击的数据） | 数据点击回调事件 |