ionic-framework - 点击事件不会在第一张幻灯片上触发

Question

创建了一个带有离子滑块的滑块。但有时滑块的第一张和最后一张幻灯片不会触发点击事件。就像我们正在显示五张幻灯片一样：2,3,4 幻灯片触发事件没有错误，而在 1,4 中它不会触发点击事件，也不会显示任何错误。

请给我解决方案。提前致谢

.html 文件

<ion-grid>
<ion-row>
  <ion-col size="12" class="p-0">
    <ion-slides pager="false" #slideWithNav
    (ionSlideDidChange)="SlideDidChange(sliderOne,slideWithNav)" class="pb-10">
      <ion-slide tappable *ngFor="let s of sliderOne.slidesItems" (click)="openModal(s)">
          <div>
            <h6 class="m-5 cardTtl">{{s.name}}</h6>
          </div> 
      </ion-slide>
    </ion-slides>
  </ion-col>
</ion-row>

.js 文件

let slides = document.querySelector('ion-slides');

const slideOpts = {
    grabCursor: true,
    centeredSlides: true,
    slidesPerView: 2.45,
    initialSlide: 1,
    pager: true,
    loop: true,
    autoplay:false,
    coverflowEffect: {
      rotate: 5,
      stretch: 0,
      depth: 100,
      modifier: 1,
      slideShadows: true,
  },
  pagination: {   
        el: '.swiper-pagination',
      },
    on: {
      beforeInit() {
        const swiper = this;
        swiper.classNames.push(`${swiper.params.containerModifierClass}coverflow`);
        swiper.classNames.push(`${swiper.params.containerModifierClass}3d`);
        swiper.params.watchSlidesProgress = true;
        swiper.originalParams.watchSlidesProgress = true;
      },
      setTranslate() {
        const swiper = this;
              const {
                width: swiperWidth, height: swiperHeight, slides, $wrapperEl, slidesSizesGrid, $
              } = swiper;
              const params = swiper.params.coverflowEffect;
              const isHorizontal = swiper.isHorizontal();
              const transform$$1 = swiper.translate;
              const center = isHorizontal ? -transform$$1 + (swiperWidth / 2) : -transform$$1 + (swiperHeight / 2);
      
              const rotate = isHorizontal ? params.rotate : -params.rotate;
              const translate = params.depth;
              // Each slide offset from center
              for (let i = 0, length = slides.length; i < length; i += 1) {
                const $slideEl = slides.eq(i);
      
                const slideSize = slidesSizesGrid[i];
      
                const slideOffset = $slideEl[0].swiperSlideOffset;
      
                const offsetMultiplier = ((center - slideOffset - (slideSize / 2)) / slideSize) * params.modifier;
      
                let rotateY = isHorizontal ? rotate * offsetMultiplier : 0;
                let rotateX = isHorizontal ? 0 : rotate * offsetMultiplier;
                // var rotateZ = 0
                let translateZ = -translate * Math.abs(offsetMultiplier * 6.2);
                let translateY = isHorizontal ? 0 : params.stretch * (offsetMultiplier);
                let translateX = isHorizontal ? params.stretch * (offsetMultiplier) : 0;
      
                // Fix for ultra small values
                if (Math.abs(translateX) < 0.001) translateX = 0;
                if (Math.abs(translateY) < 0.001) translateY = 0;
                if (Math.abs(translateZ) < 0.001) translateZ = 0;
      
                if (Math.abs(rotateY) < 0.001) rotateY = 0;
                if (Math.abs(rotateX) < 0.001) rotateX = 0;
      
                const slideTransform = `translate3d(${translateX}px,${translateY}px,${translateZ}px)  rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
      
                $slideEl.transform(slideTransform);
                $slideEl[0].style.zIndex = -Math.abs(Math.round(offsetMultiplier)) + 1;
                if (params.slideShadows) {
                  // Set shadows
                  let $shadowBeforeEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-left') : $slideEl.find('.swiper-slide-shadow-top');
                  let $shadowAfterEl = isHorizontal ? $slideEl.find('.swiper-slide-shadow-right') : $slideEl.find('.swiper-slide-shadow-bottom');
                  if ($shadowBeforeEl.length === 0) {
                    $shadowBeforeEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'left' : 'top'}"></div>`);
                    $slideEl.append($shadowBeforeEl);
                  }
                  if ($shadowAfterEl.length === 0) {
                    $shadowAfterEl = swiper.$(`<div class="swiper-slide-shadow-${isHorizontal ? 'right' : 'bottom'}"></div>`);
                    $slideEl.append($shadowAfterEl);
                  }
                  if ($shadowBeforeEl.length) $shadowBeforeEl[0].style.opacity = offsetMultiplier > 0 ? offsetMultiplier : 0;
                  if ($shadowAfterEl.length) $shadowAfterEl[0].style.opacity = (-offsetMultiplier) > 0 ? -offsetMultiplier : 0;
                }
              }
  
         // Set correct perspective for IE10
        if (swiper.support.pointerEvents || swiper.support.prefixedPointerEvents) {
          const ws = $wrapperEl[0].style;
          ws.perspectiveOrigin = `${center}px 50%`;
        }
      },
      setTransition(duration) {
        const swiper = this;
        swiper.slides
          .transition(duration)
          .find('.swiper-slide-shadow-top, .swiper-slide-shadow-right, .swiper-slide-shadow-bottom, .swiper-slide-shadow-left')
          .transition(duration);
      }
    }
}

slides.options = slideOpts;

.ts 文件

constructor(public modalController: ModalController) {

     $.getScript('assets/js/slider.js');
     this.sliderOne =
         {
         isBeginningSlide: true,
         isEndSlide: false,
         slidesItems: [
             { id: 0, name: 'text1' },
             { id: 1, name: 'text2' },
             { id: 2, name: 'text3' },
             { id: 3, name: 'text4' }
         ],
       };
   }

async openModal(s) {
    const modal = await this.modalController.create({
      component: SliderPage,
      componentProps: {
        titleName: s.name
      }
    });
    return await modal.present();
  }

标签： ionic-frameworksliderionic4swiperion-slides