Question

我有一个基于Ionic4的图像库，可以与以下html一起正常工作

        <ion-header>
          <ion-toolbar>
            <ion-title>{{ this.userService.images[currentImageIdx].Title }}</ion-title>
          </ion-toolbar>
        </ion-header>
      <ion-content>
        <ion-slides #photoslider [options]="sliderOptions" (ionSlideDidChange)="checkKeyandFixText()">
          <ion-slide *ngFor="let i of userService.images">
            <ion-img cache="false" width="50%" *ngIf="userService.azurekey.Key"
            [src]="i.ImageUrl + userService.azurekey.Key"></ion-img>
          </ion-slide>
        </ion-slides>
   ... more stuff
        </ion-content>

我想在左上角添加一个菜单开关，因此我使用了网格进行布局，因此我更改了标题部分：

      <ion-header>
        <ion-grid no-padding>
          <ion-row>
            <ion-col size="1" no-padding>
              <ion-menu-button no-padding>
                <ion-icon name="menu" no-padding></ion-icon>
              </ion-menu-button>
            </ion-col>
            <ion-col size="11">
              <ion-toolbar>
                <ion-title>{{ this.userService.images[currentImageIdx].Title }}</ion-title>
              </ion-toolbar>
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-header>

当我这样做时，离子幻灯片不再起作用...它不会渲染。没有错误报告，只是消失了。我认为它仍然处于活动状态，因为页面下方有一些按钮可以更改活动幻灯片，还可以更改标题，并且仍然可以更改。

这是离子幻灯片的已知/未知问题吗？我是否正以正确的方式接近菜单切换按钮的位置（确实感觉有点破烂不堪-所以可以接受其他建议。）。预先感谢布雷特

编辑以添加图片和一些进一步的说明

这在网格中没有菜单按钮：

...，这是在网格中添加的菜单切换：

图像上方和下方的文本来自图像对象数组的'currentImageIdx'元素。在（ionSlideDidChange）=“ checkKeyandFixText（）”函数中设置currentImageIdx，该函数在代码中被调用和引用。 @ViewChild正在访问幻灯片：

   @ViewChild('photoslider', {static: false}) photoslider: IonSlides;

...，并且checkKey函数包含：

            checkKeyandFixText() {
              this.userService.getStorageURLKey('').then(() => { // trigger key update
              });
              this.photoslider.getActiveIndex().then((res) => {
                this.currentImageIdx = res;
              ... more stuff

因此，“ photoslider”对象必须存在，否则我确定某些东西会驳倒。

跟随离子头与网格时未出现离子滑动

0 个答案: