ReactJS:React Slick(垂直)滑块会干扰Flickity Carousel(水平)

我正在使用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还是很陌生,这使我疯狂调试。 如果有人对如何实现此功能有其他建议,我欢迎您提出建议。谢谢!

leilei19870815 回答:ReactJS:React Slick(垂直)滑块会干扰Flickity Carousel(水平)

暂时没有好的解决方案,如果你有好的解决方案,请发邮件至:iooj@foxmail.com
本文链接:https://www.f2er.com/3163449.html

大家都在问