时间戳

首页 > 解决方案 > 离子滑块固定在离子含量的底部

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

问题描述

我将离子滑块固定在离子内容的顶部我试图将其固定在底部并始终继续滑动，在页面的第一次加载时滑块会自动滑动但是如果我打开另一个页面并返回到同一页面滑块停止。

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

标签： javascriptionic-frameworkionic4ion-slides

解决方案

要将滑块固定在底部，请添加一个 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

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

推荐阅读