Ionic 如何使用react-responsive-carousel垂直和水平(嵌套)移动Carousel

3lxsmp7m  于 2023-10-14  发布在  Ionic
关注(0)|答案(2)|浏览(158)

我在Ionic React工作。我添加了react-responsive-carousel来滑动内容,我需要根据情况垂直和水平滚动carousel。如何解决这个问题?请帮

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

class DemoCarousel extends Component {
    render() {
        return (
            <Carousel>
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page

// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';

// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>
3j86kqsm

3j86kqsm1#

它可以通过设置这两个 prop 来修复:

preventMovementUntilSwipeScrollTolerance={true}
swipeScrollTolerance={20}

preventMovementUntilSwipeScrollTolerance:在用户滑动到swipeScrollTolerance上指定的值之前,不要让carousel滚动。
swipeScrollTolerance:滑动时需要多少像素才能改变幻灯片,defaults to 5

mtb9vblg

mtb9vblg2#

根据docs,您可以将滚动方向作为'horizontal''vertical'参数传递给Caribbean
将滚动方向的两个选项存储为变量,并根据条件设置滚动方向。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import "react-responsive-carousel/lib/styles/carousel.min.css"; // requires a loader
import { Carousel } from 'react-responsive-carousel';

const SCROLL_DIRECTION = {
   H = "horizontal",
   V = "vertical"
}

class DemoCarousel extends Component {  
    constructor() {
    super()
    this.state = {
      scrollDirection: SCROLL_DIRECTION.H // or SCROLL_DIRECTION.V
    }
   }
    render() {
        return (
            <Carousel
              direction = {this.state.scrollDirection} 
            >
                <div>
                    <img src="assets/1.jpeg" />
                    <p className="legend">Legend 1</p>
                </div>
                <div>
                    <img src="assets/2.jpeg" />
                    <p className="legend">Legend 2</p>
                </div>
                <div>
                    <img src="assets/3.jpeg" />
                    <p className="legend">Legend 3</p>
                </div>
            </Carousel>
        );
    }
});

ReactDOM.render(<DemoCarousel />, document.querySelector('.demo-carousel'));

// Don't forget to include the css in your page

// Using webpack or parcel with a style loader
// import styles from 'react-responsive-carousel/lib/styles/carousel.min.css';

// Using html tag:
// <link rel="stylesheet" href="<NODE_MODULES_FOLDER>/react-responsive-carousel/lib/styles/carousel.min.css"/>

相关问题