Materialize Carousel高度设置在初始页面浏览时不正确。

Question

我使用的是 从物质化的旋转木马功能 并且几乎可以工作。好像有几个人对旋转木马的高度有意见（见 此处 或 此处)但所有的解决方案都是通过手动改变旋转木马的高度来实现的。这是我的代码。

<div class="carousel carousel-slider" data-indicators="true" id="carousel-one" style="display:block;">
			<div class="carousel-item" href="#one!" style="display:block;">
				<img src="abc.jpg" style="display:block;">
			</div>
			<div class="carousel-item" href="#two!" style="display:block;">
				<img src="https://www.bestellen.net/images/preview/foe2_2.jpg" style="display:block;">
			</div>
			<div class="carousel-item" href="#three!" style="display:block;">
				<img src="efg.jpg" style="display:block;">
			</div>
		</div>

  document.addEventListener('DOMContentLoaded', function() {
  M.AutoInit();

  var options = {
    fullWidth: true,
    indicators: true
  };  
  
  var elems = document.querySelector('#carousel-one');
  console.log(elems)
  var instances = M.Carousel.init(elems, options);
}
})

对我来说，唯一的问题是旋转木马只有第一次浏览时的最小高度，但如果我刷新页面，它就会计算出正确的高度。所以我想在onload上使用这个现有的函数，但我不知道如何调用它，哪个函数是正确的。

/**
       * Handle Throttle Resize
       * @param {Event} e
       */

    }, {
      key: "_handleResize",
      value: function _handleResize(e) {
        if (this.options.fullWidth) {
          this.itemWidth = this.$el.find('.carousel-item').first().innerWidth();
          this.imageHeight = this.$el.find('.carousel-item.active').height();
          this.dim = this.itemWidth * 2 + this.options.padding;
          this.offset = this.center * 2 * this.itemWidth;
          this.target = this.offset;
          this._setCarouselHeight(true);
        } else {
          this._scroll();
        }
      }

      /**
       * Set carousel height based on first slide
       * @param {Booleam} imageOnly - true for image slides
       */

    }, {
      key: "_setCarouselHeight",
      value: function _setCarouselHeight(imageOnly) {
        var _this65 = this;

        var firstSlide = this.$el.find('.carousel-item.active').length ? this.$el.find('.carousel-item.active').first() : this.$el.find('.carousel-item').first();
        var firstImage = firstSlide.find('img').first();
        if (firstImage.length) {
          if (firstImage[0].complete) {
            // If image won't trigger the load event
            var imageHeight = firstImage.height();
            if (imageHeight > 0) {
              this.$el.css('height', imageHeight + 'px');
            } else {
              // If image still has no height, use the natural dimensions to calculate
              var naturalWidth = firstImage[0].naturalWidth;
              var naturalHeight = firstImage[0].naturalHeight;
              var adjustedHeight = this.$el.width() / naturalWidth * naturalHeight;
              this.$el.css('height', adjustedHeight + 'px');
            }
          } else {
            // Get height when image is loaded normally
            firstImage.one('load', function (el, i) {
              _this65.$el.css('height', el.offsetHeight + 'px');
            });
          }
        } else if (!imageOnly) {
          var slideHeight = firstSlide.height();
          this.$el.css('height', slideHeight + 'px');
        }
      }

Answer 1

很抱歉，但我不能评论，因为我现在只有不到50的信誉。

你有没有测试你的代码没有使用 M.AutoInit();?

看过文档后，这是一个初始化的? 都 组件，这可能是罪魁祸首，因为你正在初始化你的旋转木马的 第二次 这次通话后。