ionic 4 - 离子滑动组件不工作

Question

我正在尝试在 modal 中使用 ion-slides。

尝试了很多不同的方法，但它始终是免费的可拖动停在任何位置。

看起来component 没有设置。

我的 HTML

<ion-content>
<div class="page_content">

  <ion-slides #slides [pager]="true" [options]="slideOpts">

    <ion-slide class="slide_scan">slide1</ion-slide>
    <ion-slide class="slide_info">slide2</ion-slide>
    <ion-slide class="result">slide3</ion-slide>

  </ion-slides>
</div>
</ion-content>

我的 TS

...
import { IonSlides } from '@ionic/angular';
...

export class ModalPayPage implements OnInit {

  // @ViewChild('slides') slides: IonSlides;
  // @ViewChild('slides', {static: true}) slides: IonSlides;
  @ViewChild('slides', { read: true, static: false }) ionSlides: IonSlides;

  slideOpts = {
    initialSlide   : 0,
    speed          : 400,
  };

  constructor(
    private modalController:ModalController,
    public alertController: AlertController,
    public platform: Platform,
    ) { }

  ...

}

我是不是做错了什么？

Answer 1

我最近在一个项目中实现了 Ion-slides。我将在这里发布我的代码，希望对你有所帮助。

 <ion-slides pager="false" slidesPerView="1" shouldLockSwipes="1">
            <ion-slide *ngFor="let promocode of promocodedata">
                <ion-card  >
                    <ion-card-header>
                        {{promocode.code}}
                    </ion-card-header>
                    <ion-card-content>
                    Upto <br>
                    <p>{{promocode.rate}}% Off</p>
                    <p style="font-size: 9px;">{{promocode.description}}</p>
                    </ion-card-content>
                  </ion-card>
            </ion-slide>

         </ion-slides>

这是我调整样式的.scss文件内容

.home_promo_code{
        margin-top:20px;
        .card{
            border-radius: 0px;
            width: calc(100% - 5px);
            margin-bottom: 10px;
            // background-image: url("../../assets/imgs/promo.png") !important;
            background-position: center;
            background-size: cover;
            height: 150px;
            // background-color: rgba(0, 0, 0, 0.40);
            background-image: linear-gradient(to right, #28328c, #4f5cd5);
            box-shadow: none !important;

            .card-header{
                color: #fff;
                padding-bottom: 0px;
                font-size: 14px;
                font-weight: 100;
                padding-bottom: 10px;
                text-align: center;
            }
            .card-content{
                color: #fff;
                text-align: center;
                p{
                    color: #fff;
                    font-size: 18px;
                    font-weight: 250;
                }

            }
        }
    }