0

所以，我试图用 Flickity 和 React 制作一个这样的画廊，但我得到了一些奇怪的闪烁，并且动画不会开始，直到我尝试调整（输出）窗口的大小，然后一切都很好。在 Firefox 上，有时有效，有时无效，而 Chrome 拒绝完全合作。也许值得一提的是，我使用纯 Javascript 和 Flickity 完成了这项工作，所以我想我在 React 中做错了什么。这是代码：

HTML：

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

反应JS

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')
);

社会保障体系：

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%;
    }
}
4

3 回答 3

0

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

于 2016-07-19T17:21:36.317 回答
0

对我来说，这似乎是一种竞争条件。我知道这不是最漂亮的解决方案，但试试这个：

  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);
},

在 Reacts componentDidMount 文档中：

如果您想与其他 JavaScript 框架集成，使用 setTimeout 或 setInterval 设置计时器，或发送 AJAX 请求，请在此方法中执行这些操作。

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

于 2016-07-19T17:27:25.693 回答
0

根据docs，“未加载的图像没有大小，这可能会影响单元格的位置。要解决此问题，imagesLoaded 选项会在其图像加载后重新定位单元格。”

但是，“作为独立包，Flickity 不包含 imagesLoaded、asNavFor 和 bgLazyLoad 代码。您可以单独要求这些包。”

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

第 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
    });
于 2016-07-19T18:36:41.463 回答