ion-slider 固定在 ion-content 的底部

Question

我将 ion-slider 固定在 ion-content 的顶部我试图将其固定在底部并始终继续滑动，在页面的第一次加载时滑块会自动滑动但是如果我打开另一个页面并且returns滑块停止到同一页。

<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,
};

Answer 1

要将滑块固定在底部，请添加一个 ion-footer，如下面的伪代码所示：

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

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

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

控制台是否有任何错误？

什么是加载ionSlides2？

添加有关问题的更多信息，我会努力更新我的答案。

这很可能是此处讨论的生命周期问题。 https://github.com/ionic-team/ionic/issues/16935

我可能会为幻灯片创建一个 class 变量，然后从 ionViewWillEnter

触发自动播放

ion-slider 固定在 ion-content 的底部

ion-slider fixed on bottom of ion-content

javascript

ionic-framework

ion-slides

ionic4