Question

我正在使用Flickity作为我的水平转盘。在轮播中，我有很多图块（图像和文字），但有一个例外：其中一个图块是垂直滑块。

这些组件在台式机上运行良好，但是在移动设备上却非常滞后。我的理论是，水平触摸事件会干扰垂直滚动。


//Carousel.js
import Flickity from 'react-flickity-component'
const Carousel = ({ children }) => {    
    return (<Flickity
        options={carousel_options(wrapAround, frictionVal)}
        reloadOnUpdate
        >
        {children}
    </Flickity>)
}

//NewsTile.js
    import Slider from 'react-slick';
    /*definitions...*/

     return (
                <Tile className="newsTile">
                    <Slider {...settings}>
                    <BreakingNews>Breaking News:</BreakingNews>
                        <NewsWrapper>
                            {this.state.newsItems.map((news, i) => {
                                return (
                                    <NewsObject key={i} className="newsObject" >
                                        <h2 className="newsTitle">
                                            {news.title}
                                        </h2>
                                        <div style={{ height: '24vh' }}>
                                            <img className="newsImage" src={news.image} role="presentation" alt="" />
                                        </div>
                                        <p className="newsDescription">
                                            {news.description}
                                        </p>
                                        <p className="newsFooter">
                                            {news.footer}
                                        </p>
                                    </NewsObject>

                            )}

                        )}
                      </Slider>
                    </NewsWrapper>
                </Tile>
            )


//PopulateCarousel.js
import Carousel from "./Carousel";
const PopulateCarousel = () => (
     <Carousel>
          {this.props.tiles.map(tile => {
            const id = parseInt(tile.id);
            if (tile.isNews) {
              return <NewsTile key={id} theme={this.props.theme} />;
            } 
              return <OtherTile key={id} theme={this.props.theme} />;
     </Carousel>
)

我对React还是很陌生，这使我疯狂调试。如果有人对如何实现此功能有其他建议，我欢迎您提出建议。谢谢！

ReactJS：React Slick（垂直）滑块会干扰Flickity Carousel（水平）

0 个答案: