lanan-old/detection-user/uni_modules/h-carousel-roll/readme.md

时间滚动组件

组件名：h-carousel-roll

安装方式

本组件符合easycom规范，HBuilderX 2.5.5起，只需将本组件导入项目，在页面template中即可直接使用，无需在页面中import和注册components。

基本用法

在 template 中使用组件

<!-- 基本使用 -->
<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 文件中引入

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

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

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

在 根目录下的 uni.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（点击的数据）	数据点击回调事件