使用 Flickity 和 React 的简单自动播放画廊

Question

所以，我正在尝试使用 Flickity 和 React 制作一个像 this 这样的画廊，但是我遇到了一些奇怪的闪烁，并且在我尝试调整（输出）window，然后一切都很好。在 Firefox 上，有时有效，有时无效，而 Chrome 则拒绝完全合作。也许，值得一提的是，我用普通的 Javascript 和 Flickity 完成了这项工作，所以我想我在 React 中做错了什么。这是代码：

HTML:

<div id="main"></div>

ReactJS

var Gallery = React.createClass({
    componentDidMount: function() {
        this.flkty = new Flickity('.gallery', {
            freeScroll: true,
            wrapAround: true,
            prevNextButtons: false,
            pageDots: false,
            freeScrollFriction: 0.00,
            lazyLoad: 2
        });
        this.flkty.velocity = 1;
        this.flkty.isFreeScrolling = true;
        this.flkty.startAnimation();
    },
    render: function() {
    return (
        <div className="gallery">
            <div key="01" className="gallery-cell">
                <img src="http://placehold.it/450x1500" />
            </div>
            <div key="02" className="gallery-cell">
                <img src="http://placehold.it/850x1200" />
            </div>
            <div key="03" className="gallery-cell">
                <img src="http://placehold.it/150x1500" />
            </div>
            <div key="04" className="gallery-cell">
                <img src="http://placehold.it/1850x1500" />
            </div>
            <div key="05" className="gallery-cell">
                <img src="http://placehold.it/650x1000" />
            </div>
            <div key="06" className="gallery-cell">
                <img src="http://placehold.it/350x2500" />
            </div>
        </div>
    )}
});

ReactDOM.render(
    <Gallery />, 
    document.getElementById('main')
);

SCSS:

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #833;
}

div#main {
    margin: 0 auto;
    width: 750px;
    height: auto !important;
    height: 100%;
    min-height: 100%;
}

.gallery {
    background: #EEE;
    overflow: hidden;
}

.gallery-cell {
    display: inline-block;
    height: 100vh;
    img {
        border-left: 2px solid #444;
        height: 100%;
    }
}

Answer 1

我不确定它是否能解决您的问题，但您可以使用 refs 尝试类似于我的另一个答案 Using MetricsGraphics.js with ReactJS 的问题。但老实说，我担心这与您使用的 Flickity 库有关，而不是 React.

Answer 2

在我看来像是一种竞争条件。我知道这不是最好的解决方案，但试试这个：

  componentDidMount: function() {
    var self = this;

    setTimeout(function(){
      self.flkty = new Flickity('.gallery', {
        freeScroll: true,
        wrapAround: true,
        prevNextButtons: false,
        pageDots: false,
        freeScrollFriction: 0.00,
        lazyLoad: true
      });
      self.flkty.velocity = 1;
      self.flkty.isFreeScrolling = true;
      self.flkty.startAnimation();
     }, 500);
},

在反应中 componentDidMount documentation:

If you want to integrate with other JavaScript frameworks, set timers using setTimeout or setInterval, or send AJAX requests, perform those operations in this method.

现在您知道这是一个竞争条件，看看是否有事件可以等待触发轮播，这样您就不会依赖 setTimeout。

Answer 3

根据docs，"Unloaded images have no size, which can throw off cell positions. To fix this, the imagesLoaded option re-positions cells once their images have loaded."

However, "As a stand-alone package, Flickity does not include imagesLoaded, asNavFor, and bgLazyLoad code. You can require these packages separately."

因此，为了解决这个问题，我必须执行以下操作：

第 1 步： npm install flickity-imagesloaded --save

第 2 步： 要求（'flickity-imagesloaded'）；

第 3 步： 将 imagesLoaded 标志添加到 Flickity 构造函数。

componentDidMount: function() {
    this.flkty = new Flickity('.gallery', {
        freeScroll: true,
        wrapAround: true,
        prevNextButtons: false,
        pageDots: false,
        freeScrollFriction: 0.00,
        lazyLoad: 2,
        imagesLoaded: true
    });

使用 Flickity 和 React 的简单自动播放画廊

Simple autoplay gallery with Flickity & React

javascript

reactjs

flickity