92 lines
2.8 KiB
Markdown
92 lines
2.8 KiB
Markdown
|
## 时间滚动组件
|
|||
|
|
> **组件名：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（点击的数据） | 数据点击回调事件 |
|