javascript - 如何在 ionic 4 中虚拟化离子载玻片

Question

如何在 ionic 4 中使用以下方法：https ://swiperjs.com/api/#virtual

我尝试根据 API 文档应用它，但此代码不起作用。我究竟做错了什么？

ngOnInit() {
//----------------------------------------------
var slides = document.querySelector("ion-slides");
// Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
slides.options = {
  initialSlide: 1,
  direction: "vertical",
  speed: 150,
  preloadImages: false,
  lazy: true,

  virtual: {
    slides: (function() {
      var slides = [];
      for (var i = 0; i < 600; i += 1) {
        slides.push(
          '<ion-slide><img src="https://picsum.photos/600/600/?image=' +
            (i + 1) +
            '"/><p>' +
            (i + 1) +
            "</p></ion-slide>"
        );
      }
      console.log(JSON.stringify(slides));
      return slides;
    }),
  }
};
//----------------------------------------------

}

Answer 1

看来您必须先初始化 Swiper

var mySwiper = new Swiper('.ion-slides');

你可以在这里试试这个：

let mySwiper = new Swiper('.ion-slides', {
    initialSlide: 1,
    direction: "vertical",
    speed: 150,
    preloadImages: false,
    lazy: true,

    virtual: {
        slides: (function() {
            var slides = [];
            for (var i = 0; i < 600; i += 1) {
                slides.push(
                    '<ion-slide><img src="https://picsum.photos/600/600/?image=' +
                    (i + 1) +
                    '"/><p>' +
                    (i + 1) +
                    "</p></ion-slide>"
                );
            }
            console.log(JSON.stringify(slides));
            return slides;
        })
    }
});