离子滑块固定在离子含量的底部

让我们

我将离子滑块固定在离子含量的顶部,我试图将其固定在底部,并始终继续滑动,在页面的第一个负载上,滑块会自动滑动,但是如果我打开另一页并返回同一页面滑块停止。

<ion-header>
  <ion-toolbar class="new-background-color">
    <ion-title>    
      <ion-text color="light">
        <h4>Main Page</h4>
      </ion-text>   

  </ion-title>
  <ion-buttons slot="start">
    <ion-menu-button autoHide="false" style="
    color: white;
"></ion-menu-button>
  </ion-buttons>
  </ion-toolbar>
</ion-header>

<ion-content style="justify-content: center;">
  <ion-fab style="margin: 0 auto !important;"  vertical="bottom" horizontal="end" slot="fixed">
      <ion-fab-button color="primary" (click)="postad('0')">
        <ion-icon name="add"></ion-icon>
        </ion-fab-button>
    </ion-fab>

 


      <ion-slides  vertical="bottom" slot="fixed" style="height: 100px;" #ionSlides2 [options]="slideOptions" (ionSlidesDidLoad)="slidesDidLoad(ionSlides2)">
        <ion-slide *ngFor="let ads of adsArray;let i=index" (click)="gotoAd(i)">
          <ion-row>
            <ion-col siz="12">
              <ion-card class="col">
                <img src="https://qateef-ads.co/uploads/{{ ads.document }}">
              </ion-card>
            </ion-col>
          </ion-row>
        </ion-slide>
      </ion-slides> 



    <ion-grid class="animate-in-primary">

    <ion-row style="padding-top: 15px; padding-bottom: 25px;" *ngFor="let item of dataArray;let i=index" (click)="gotoNext(i)">
      
      <ion-card style="width: 90%;display: block;text-align: center;">
        
        <img class="list-grow-animation" style="object-fit: fill;object-position: -20% 0;width: 335px;height: 230px;" src="https://mysite.co/uploads/{{ item.document }}" >
        
        <ion-card-header>
          <ion-card-subtitle>{{ item.city }}</ion-card-subtitle>
          <ion-card-title style="color: #3055a6;">{{ item.title }}</ion-card-title>
        </ion-card-header>

        <ion-card-content>
          {{ item.message }}
        </ion-card-content>

        <ion-card-subtitle style="text-align: center;">{{ checktime(item.time) }}</ion-card-subtitle>

      </ion-card> 

      </ion-row>

 
    </ion-grid>



  </ion-content>

并在打字稿文件中使其在slidesDidLoad上自动滑动

slidesDidLoad(slides: IonSlides) {
  slides.startAutoplay();
}

slideOptions = {
  initialSlide: 1,
  speed: 400,
};

麦吉尼

要将滑块固定在底部,请添加一个离子脚注,如下面的伪代码所示:

 <ion-content>
   some content
 </ion-content>
 <ion-footer>
   some slider stuff
 </ion-footer>

我也可能不会使用内联样式将其设置为100%高度。实际上,根本不使用内联样式。这就是CSS的目的。

您的问题中没有足够的信息来回答为什么滑块在第二个视图上不起作用的问题。

控制台是否有任何错误?

什么是加载ionSlides2?

将更多信息添加到问题所在,然后我将努力更新答案。

如此处所述,它很可能是生命周期问题。https://github.com/ionic-team/ionic/issues/16935

我可能会为幻灯片创建一个类变量,然后从ionViewWillEnter触发自动播放

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章