如何在 ionic 4 中虚拟化离子载玻片答案

【问题标题】：how to virtualize ion-slides in ionic 4如何在 ionic 4 中虚拟化离子载玻片
【发布时间】：2020-07-10 11:36:20
【问题描述】：

如何在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;
    }),
  }
};
//----------------------------------------------

}

【问题讨论】：

标签： javascript angular ionic-framework swiper swiperjs

【解决方案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;
        })
    }
});

【讨论】：