0

我有一个基于 Swiperjs 第三方库的轮播。问题是，当我使用 scope: true 时，我没有问题并且工作正常，但是，当我尝试使用 shadow: true 配置组件时，它被破坏并且没有任何作用。我正在使用以下库：

...
import  Swiper, { SwiperOptions }  from 'swiper';
...

@Component({
  tag: 'my-swiper-slider',
  styleUrl: './styles.css',
  assetsDirs: ['assets'],
  shadow: true,
})
export class Carousel {
@Prop() options: SwiperOptions = {
    slidesPerView: 3,
    spaceBetween: 40,
    autoplay: false,
    loop: false,
    autoHeight: true,
    breakpoints: {
      640: {
        slidesPerView: 5,
        spaceBetween: 20,
      },
      768: {
        slidesPerView: 5,
        spaceBetween: 40,
      },
      1024: {
        slidesPerView: 5,
        spaceBetween: 50,
      },
    }
  }
 private setSwiper() {
    this.swiper = new Swiper('.swiper-container', this.options);
  }

  componentDidLoad() {
    this.setSwiper();
  }

  render() {

    return (
      <Host class={{"container": true}}>

        <PrevBtn
          goBack={this.goBack.bind(this)} />

        <div class="swiper-container">
          <div class="swiper-wrapper">
            <slot></slot>
          </div>
        </div>

        <NextBtn
          goForward={this.goForward.bind(this)} />

      </Host>
    );
  }
}

出于某种原因，当我将组件配置为“shadow：true”时，它无法访问模板或者是我的想法。

4

1 回答 1

3

当你启用shadow时，组件的所有子元素都将被移动到它的影子 DOM 中，因此作为实现细节隐藏。这意味着您将无法再使用.swiper-container查询选择器找到您的容器。

但是，Swiper构造函数也可以使用 HTML 元素而不是查询选择器，因此您可以ref在容器元素上使用：

@Component({ tag: 'my-swiper-slider', shadow: true })
export class Carousel {
  @Prop() options: SwiperOptions;

  @State() swiper?: Swiper;
  @State() swiperContainerRef?: HTMLDivElement;

  componentDidLoad() {
    if (this.swiperContainerRef) {
      this.swiper = new Swiper(this.swiperContainerRef, this.options);
    }
  }

  render() {
    return (
      <Host>
        <div ref={el => this.swiperContainerRef = el)} />
      </Host>
    );
  }
}

容器 ref 应该始终在componentDidLoad生命周期挂钩中可用，但您也可以使用requestAnimationFrame它来等待它变得可用。

于 2020-02-18T01:14:05.063 回答