ReactJS Onsen UI 轮播组件

ReactJS Onsen-UI 是一个流行的前端库，其中包含一组 React 组件，旨在以美观高效的方式开发 HTML5 混合和移动 Web 应用程序。 Carousel组件允许用户显示滑动项，当有一组内容在同一级别时使用它。我们可以在 ReactJS 中使用以下方法来使用 Onsen-UI 轮播组件。

轮播道具：

方向：用于表示轮播的方向。
fullscreen：设置为 true 时，轮播将覆盖整个屏幕。
overscrollable：旋转木马可以滚动到边缘，当设置为 true 时，它会在释放时弹回。
居中：当设置为 true 时，轮播然后选定的项目将位于轮播的中心而不是开头。
itemWidth：用于表示 ons-carousel-item 的宽度。
itemHeight：用于表示 ons-carousel-item 的高度。
autoScroll：设置为 true 时，轮播会在释放时自动滚动到最近的项目边框。
autoScrollRatio：它指定用户必须拖动轮播多少才能自动滚动到下一个项目，范围从 0 到 1。
swipeable：设置为 true 时，可以通过拖动或滑动来滚动轮播。
disabled：设置为 true 时，轮播将被禁用。
index：用于指定要显示的 ons-carousel-item 的索引。
autoRefresh：设置为true时，当子节点数量发生变化时，轮播会自动刷新。
onPostChange：是一个回调函数，在当前轮播项目发生变化后调用。
onRefresh：当轮播被刷新时调用的回调函数。
onOverscroll：当轮播被过度滚动时调用的回调函数。
animationOptions：用于指定动画的时长、延迟和计时。
onSwipe：当用户滑动轮播时调用的回调函数。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序：
```
npx create-react-app foldername
```
第 2 步：创建项目文件夹（即文件夹名称）后，使用以下命令移动到该文件夹：
```
cd foldername
```
第 3 步：创建 ReactJS 应用程序后，安装必需的模块使用以下命令：
```
npm install onsenui react-onsenui 
```

项目结构：它将如下所示。

项目结构

示例：现在在App.js文件中写下以下代码。在这里，App 是我们编写代码的默认组件。

App.js

import React from 'react';
import 'onsenui/css/onsen-css-components.css';
import { Carousel, CarouselItem } from 'react-onsenui';
  
export default function App() {
  
    return (
        
            ReactJS Onsen-UI Carousel Component
            
                
                    
                      Swipe Me
                    
                
                
                    
                      Swipe Me
                    
                
            
        
    );
}

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序：

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：

参考： https://onsen.io/v2/api/react/Carousel.html