更新记录

1.0.4（2023-08-17）

• 修复小程序和H5使用 v-for 差异问题

1.0.3（2023-08-17）

• 修复小程序数据为两条时，第一条数据空白问题

1.0.2（2023-07-13）

• 修复小程序开始滚动时，第一行空白问题

平台兼容性

时间滚动组件

组件名：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

Events