Quantcast
Channel: Ionic Forum - Latest topics
Viewing all articles
Browse latest Browse all 70747
↧

Ion-slides isuless auto height ionic 4

November 3, 2019, 3:06 pm
$
0
0

@cristsaavedra wrote:

Greetings everyone

I am working with slides and cards inside the slides which I load with data without problems. I have the problem with the ion-infinite-scroll events because when I reload more data on the card it loads them correctly, but when I change the slide, the active slide remains with the height of the previous slide.
I have searched for information about it and there is an attribute called “autoHeight” which is set to true in the slider settings. When I do this and reload the data from 0 the slide shows me a small area with the card data but they are almost not displayed. I enclose images with the aforementioned:

1
1.jpg1080×2340 537 KB
2
2.jpg1080×2340 273 KB
3
3.jpg1080×2340 105 KB

Then I will attach the code that I execute:

type or paste code here
```<ion-header>
  <ion-toolbar class="ionToolbarPrincipal">
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>Noticias Generales</ion-title>
  </ion-toolbar>
  
  <ion-toolbar class="ionToolbarSegment">
    <ion-segment scrollable [(ngModel)]="categories" (ionChange)="CambiarCategoria($event)">
      <ion-segment-button *ngFor="let category of listaCategorias" value="{{ category.id }}" id="{{ category.id }}">
        <ion-label class="labelTextCategoria"><b>{{ category.nombre }}</b></ion-label>
      </ion-segment-button>
    </ion-segment>
  </ion-toolbar>
</ion-header>


<ion-content [scrollEvents]="true">

    <ion-refresher slot="fixed" (ionRefresh)="ActualizarNoticias($event)">
      <ion-refresher-content
        pullingIcon="arrow-dropdown"
        pullingText="Actualizando Noticias"
        refreshingSpinner="circles"
        refreshingText="Actualizando...">
      </ion-refresher-content>
    </ion-refresher>

    <ion-slides [options]="sliderConfig" (ionSlideDidChange)="CambiarSlide()">
      
      <ion-slide> 
        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-card class="cardsRow" color="light" *ngFor="let card of cardCat0; let idx=index;">
                <ion-card-header>
                  <ion-card-title text-center class="textoTitulo">{{ card.titulo }}</ion-card-title>
                </ion-card-header>
                <ion-card-content class="cardContent"> 
                  <div *ngIf="card.imagen != ''">
                    <ion-img src="{{ card.imagen }}" (click)="ObtenerDatosCards(card.id)"></ion-img>
                    {{ card.detalle }}
                  </div>
                
                  <div *ngIf="card.imagen == ''">
                      <ion-label (click)="ObtenerDatosCards(card.id)">{{ card.detalle }}</ion-label>
                  </div>
                  <ion-row>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.favorita"></ion-icon> 
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.alarma"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.guardada"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin float-right fill="clear" (click)="CargarBotonesOpciones(card)">
                        <ion-icon name="reorder"></ion-icon>
                      </ion-button>
                    </ion-col>
                  </ion-row>
                </ion-card-content>
              </ion-card>
              
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-slide>

      
      <ion-slide>
        <ion-grid>
          <ion-row>
            <ion-col>
              <ion-card class="cardsRow" color="light" *ngFor="let card of cardCat1; let idx=index;">
                <ion-card-header>
                  <ion-card-title text-center class="textoTitulo">{{ card.titulo }}</ion-card-title>
                </ion-card-header>
                <ion-card-content class="cardContent"> 
                  <div *ngIf="card.imagen != ''">
                    <ion-img src="{{ card.imagen }}" (click)="ObtenerDatosCards(card.id)"></ion-img>
                    {{ card.detalle }}
                  </div>
                
                  <div *ngIf="card.imagen == ''">
                      <ion-label (click)="ObtenerDatosCards(card.id)">{{ card.detalle }}</ion-label>
                  </div>
                  <ion-row>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.favorita"></ion-icon> 
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.alarma"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin text-center fill="clear" style="pointer-events: none;">
                        <ion-icon [name]="card.guardada"></ion-icon>
                      </ion-button>
                    </ion-col>
                    <ion-col col-3 no-padding>
                      <ion-button no-margin float-right fill="clear" (click)="CargarBotonesOpciones(card)">
                        <ion-icon name="reorder"></ion-icon>
                      </ion-button>
                    </ion-col>
                  </ion-row>
                </ion-card-content>
              </ion-card>

              
            </ion-col>
          </ion-row>
        </ion-grid>
      </ion-slide>
	  
	</ion-slides>
	 <ion-infinite-scroll threshold="50px" (ionInfinite)="AgregarMasNoticias($event)">
        <ion-infinite-scroll-content
          loadingSpinner="bubbles"
          loadingText="Cargando datos...">
        </ion-infinite-scroll-content>
      </ion-infinite-scroll>
</ion-content>


<app-footer></app-footer>



And my ts.code


sliderConfig = {
    slidesPerView: 1.100,
    spaceBetween: 10,
    centeredSlides: true,
    autoHeight: true
};

ngOnInit() {
try
{
  this.LoaderNoticias('Cargando Noticias...');

  this.databaseService.getSesion(1).then(result => {
    this.token = result.valor;
    this.databaseService.getSesion(2).then(result => {
      this.imei = result.valor;
      
      let datosServicio = { 
        token: this.token,
        imei: this.imei
      };

      this.esqueletoService.CargarCategoriasGenerales(datosServicio).then((result) => {
        if (result != null) 
        {
          let resultCategoria = result.toString().split('|');

          if(resultCategoria[0] == "777")
          {
            this.databaseService.GuardaSQLlite(9,resultCategoria[1]);
            var datosCategoria = JSON.parse(resultCategoria[1]);
            this.listaCategorias = Object.values(datosCategoria); //SE CARGAN LAS CATEGORIAS

            let datosNoticias = { 
              pagina: 0, 
              token: this.token,
              imei: this.imei
            };
        
            this.esqueletoService.CargarNoticiasGeneral(datosNoticias).then((result) => {
              if (result != null) 
              {
                let datosNoticiaGeneral = result.toString().split('|');
      
                if(datosNoticiaGeneral[0] == "777")
                {
                  this.loadingController.dismiss();
                  var datosVisualizar = JSON.parse(datosNoticiaGeneral[1]);
                  Object.keys(datosVisualizar).forEach(key => {
  
                    if(datosVisualizar[key]["favorita"] == 0)
                    {
                      datosVisualizar[key]["favorita"] = "star-outline";
                    }
                    else
                    {
                      datosVisualizar[key]["favorita"] = "star";
                    }
  
                    if(datosVisualizar[key]["alarma"] == 0 )
                    {
                      datosVisualizar[key]["alarma"] = "remove-circle-outline";
                    }
                    else
                    {
                      datosVisualizar[key]["alarma"] = "remove-circle";
                    }
  
                    if(datosVisualizar[key]["guardada"] == 0 )
                    {
                      datosVisualizar[key]["guardada"] = "folder-open";
                    }
                    else
                    {
                      datosVisualizar[key]["guardada"] = "folder";
                    }
                  });
  
                  this.cardCat0 = datosVisualizar;
                  this.databaseService.GuardaSQLlite(10,"0"); // SE ALMACENA LA CATEGORIA ACTIVA 
                  this.databaseService.GuardaSQLlite(11,"1"); // SE ALMACENA LA PAGINA ACTUAL 
CATEGORIA 0 GENERAL
                  this.categories = "0";

                }
                else if (datosNoticiaGeneral[0] == "305")
                {
                  this.loadingController.dismiss();
                  this.MostrarAlerta("Noticias","",datosNoticiaGeneral[2]);
                }
                else if (datosNoticiaGeneral[0] == "310")
                {
                  this.loadingController.dismiss();
                  this.MostrarAlerta("Noticias","",datosNoticiaGeneral[2]);
                }
                else if(datosNoticiaGeneral[0] == "315")
                {
                  this.loadingController.dismiss();
                  this.MostrarAlerta("Noticias","",datosNoticiaGeneral[2]);
                }
                else if(datosNoticiaGeneral[0] == "000")
                {
                  this.loadingController.dismiss();
                  this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                }   
              } else {
                this.loadingController.dismiss();
                this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
              }
            }, (err) => {
              this.loadingController.dismiss();
              this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
            });

          }
          else if (resultCategoria[0] == "305")
          {
            this.loadingController.dismiss();
            this.MostrarAlerta("Noticias","",resultCategoria[2]);
          }
          else if (resultCategoria[0] == "310")
          {
            this.loadingController.dismiss();
            this.MostrarAlerta("Noticias","",resultCategoria[2]);
          }
          else if(resultCategoria[0] == "315")
          {
            this.loadingController.dismiss();
            this.MostrarAlerta("Noticias","",resultCategoria[2]);
          }
          else if(resultCategoria[0] == "000")
          {
            this.loadingController.dismiss();
            this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
          }   
        } else {
          this.loadingController.dismiss();
          this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
        }
      }, (err) => {
        this.loadingController.dismiss();
        this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
      });

    }, (err) => {
      this.loadingController.dismiss();
      this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
    });
  },(err) => {
    this.loadingController.dismiss();
    this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
  });
  this.loadingController.dismiss();
      
}
catch(Exception)
{
  this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
  this.loadingController.dismiss();
}
  }

AgregarMasNoticias(event)
{
this.databaseService.getSesion(10).then(resultCategoriaActiva => {
  this.categoriaActiva = resultCategoriaActiva.valor;
  if(resultCategoriaActiva.valor = "0")
  {
    this.databaseService.getSesion(2).then(resultImei => {
      this.imei = resultImei.valor;

      this.databaseService.getSesion(1).then(resultToken => {
        this.token = resultToken.valor;

        this.databaseService.getSesion(11).then(resultPaginaActualCategoria0 => {
          this.paginaActualNoticias = resultPaginaActualCategoria0.valor;

          let datosCargarMasNoticias = { 
            pagina: +this.paginaActualNoticias, 
            token: this.token,
            imei: this.imei,
            categoria: +this.categoriaActiva
          };
          
          this.esqueletoService.CargarMasNoticias(datosCargarMasNoticias).then((result) => {
            if (result != null) 
            {
              let datos = result.toString().split('|');
    
              if(datos[0] == "777")
              {
                var datosVisualizar = JSON.parse(datos[1]);

                if(datosVisualizar.length > 0)
                {
                  Object.keys(datosVisualizar).forEach(key => {
  
                    if(datosVisualizar[key]["favorita"] == 0)
                    {
                      datosVisualizar[key]["favorita"] = "star-outline";
                    }
                    else
                    {
                      datosVisualizar[key]["favorita"] = "star";
                    }
    
                    if(datosVisualizar[key]["alarma"] == 0 )
                    {
                      datosVisualizar[key]["alarma"] = "remove-circle-outline";
                    }
                    else
                    {
                      datosVisualizar[key]["alarma"] = "remove-circle"; 
                    }
    
                    if(datosVisualizar[key]["guardada"] == 0 )
                    {
                      datosVisualizar[key]["guardada"] = "folder-open";
                    }
                    else
                    {
                      datosVisualizar[key]["guardada"] = "folder";
                    }
                    this.cardCat0.push(datosVisualizar[key]);
                  });
                  this.databaseService.GuardaSQLlite(11,((+this.paginaActualNoticias + 1).toString())); // SE ALMACENA LA PAGINA ACTUAL CATEGORIA 0 GENERAL
                  event.target.complete();
                }
                else
                {
                  event.target.complete();
                }
              }
              else if (datos[0] == "305")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if (datos[0] == "310")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if(datos[0] == "315")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if(datos[0] == "000")
              {
                this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                event.target.complete();
              }   
            } else {
              this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
              event.target.complete();
            }
          }, (errorDatosNoticias) => {
            this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
            event.target.complete();
          });

        }, (errorPaginaActual) => {
          this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
          event.target.complete();
        });
      }, (errorToken) => {
        this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
        event.target.complete();
      });
    }, (errorImei) => {
      this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
      event.target.complete();
    });
  }



  else if(resultCategoriaActiva.valor = "1")
  {
    this.databaseService.getSesion(2).then(resultImei => {
      this.imei = resultImei.valor;

      this.databaseService.getSesion(1).then(resultToken => {
        this.token = resultToken.valor;

        this.databaseService.getSesion(12).then(resultPaginaActualCategoria0 => {
          this.paginaActualNoticias = resultPaginaActualCategoria0.valor;

          let datosCargarMasNoticias = { 
            pagina: +this.paginaActualNoticias, 
            token: this.token,
            imei: this.imei,
            categoria: +this.categoriaActiva
          };
          
          this.esqueletoService.CargarMasNoticias(datosCargarMasNoticias).then((result) => {
            if (result != null) 
            {
              let datos = result.toString().split('|');
    
              if(datos[0] == "777")
              {
                var datosVisualizar = JSON.parse(datos[1]);

                if(datosVisualizar.length > 0)
                {
                  Object.keys(datosVisualizar).forEach(key => {
  
                    if(datosVisualizar[key]["favorita"] == 0)
                    {
                      datosVisualizar[key]["favorita"] = "star-outline";
                    }
                    else
                    {
                      datosVisualizar[key]["favorita"] = "star";
                    }
    
                    if(datosVisualizar[key]["alarma"] == 0 )
                    {
                      datosVisualizar[key]["alarma"] = "remove-circle-outline";
                    }
                    else
                    {
                      datosVisualizar[key]["alarma"] = "remove-circle"; 
                    }
    
                    if(datosVisualizar[key]["guardada"] == 0 )
                    {
                      datosVisualizar[key]["guardada"] = "folder-open";
                    }
                    else
                    {
                      datosVisualizar[key]["guardada"] = "folder";
                    }
                    this.cardCat1.push(datosVisualizar[key]);
                  });
                  this.databaseService.GuardaSQLlite(12,((+this.paginaActualNoticias + 1).toString())); // SE ALMACENA LA PAGINA ACTUAL CATEGORIA 1
                  event.target.complete();
                }
                else
                {
                  event.target.complete();
                }
              }
              else if (datos[0] == "305")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if (datos[0] == "310")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if(datos[0] == "315")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if(datos[0] == "000")
              {
                this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                event.target.complete();
              }   
            } else {
              this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
              event.target.complete();
            }
          }, (errorDatosNoticias) => {
            this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
            event.target.complete();
          });

        }, (errorPaginaActual) => {
          this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
          event.target.complete();
        });
      }, (errorToken) => {
        this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
        event.target.complete();
      });
    }, (errorImei) => {
      this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
      event.target.complete();
    });
  }



  else if(resultCategoriaActiva.valor = "2")
  {
    this.databaseService.getSesion(2).then(resultImei => {
      this.imei = resultImei.valor;

      this.databaseService.getSesion(1).then(resultToken => {
        this.token = resultToken.valor;

        this.databaseService.getSesion(13).then(resultPaginaActualCategoria0 => {
          this.paginaActualNoticias = resultPaginaActualCategoria0.valor;

          let datosCargarMasNoticias = { 
            pagina: +this.paginaActualNoticias, 
            token: this.token,
            imei: this.imei,
            categoria: +this.categoriaActiva
          };
          
          this.esqueletoService.CargarMasNoticias(datosCargarMasNoticias).then((result) => {
            if (result != null) 
            {
              let datos = result.toString().split('|');
    
              if(datos[0] == "777")
              {
                var datosVisualizar = JSON.parse(datos[1]);

                if(datosVisualizar.length > 0)
                {
                  Object.keys(datosVisualizar).forEach(key => {
  
                    if(datosVisualizar[key]["favorita"] == 0)
                    {
                      datosVisualizar[key]["favorita"] = "star-outline";
                    }
                    else
                    {
                      datosVisualizar[key]["favorita"] = "star";
                    }
    
                    if(datosVisualizar[key]["alarma"] == 0 )
                    {
                      datosVisualizar[key]["alarma"] = "remove-circle-outline";
                    }
                    else
                    {
                      datosVisualizar[key]["alarma"] = "remove-circle"; 
                    }
    
                    if(datosVisualizar[key]["guardada"] == 0 )
                    {
                      datosVisualizar[key]["guardada"] = "folder-open";
                    }
                    else
                    {
                      datosVisualizar[key]["guardada"] = "folder";
                    }
                    this.cardCat2.push(datosVisualizar[key]);
                  });
                  this.databaseService.GuardaSQLlite(13,((+this.paginaActualNoticias + 1).toString())); // SE ALMACENA LA PAGINA ACTUAL CATEGORIA 2
                  event.target.complete();
                }
                else
                {
                  event.target.complete();
                }
              }
              else if (datos[0] == "305")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if (datos[0] == "310")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if(datos[0] == "315")
              {
                this.MostrarAlerta("Noticias","",datos[2]);
                event.target.complete();
              }
              else if(datos[0] == "000")
              {
                this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
                event.target.complete();
              }   
            } else {
              this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
              event.target.complete();
            }
          }, (errorDatosNoticias) => {
            this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
            event.target.complete();
          });

        }, (errorPaginaActual) => {
          this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
          event.target.complete();
        });
      }, (errorToken) => {
        this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
        event.target.complete();
      });
    }, (errorImei) => {
      this.MostrarAlerta("Noticias","","Estimado usuario, hubo un error inesperado.");
      event.target.complete();
    });
  }
}
}


I know that the code is something long and try to summarize it as much as I could, I ask the relevant apologies of the case.
As an attachment, I have seen in forums about this problem and I have seen an ionSliders function called "updateAutoHeight" but so far I could not make it work:

@ViewChild (IonSlides) slides: IonSlides;
this.slides.updateAutoHeight (400);

All the help you could give me, even if they are with ideas, I would greatly appreciate it since the time has come that I don't know what else to do about it to make the height of my cards work well when I initialize the application or add more data

Posts: 1

Participants: 1

Read full topic

↧
Search
Viewing all articles
Browse latest Browse all 70747

Trending Articles

Practice Sheet of Right form of verbs for HSC Students

September 22, 2019, 11:40 pm

Download: FK ft Shenky – Nakuyewa ”Prod by: Shenky”

February 16, 2017, 4:24 pm

How to win at Markstrat (Markstrat Tips and Tricks) – Vodites

January 5, 2014, 10:34 pm

Ominde Commission Report and Recommendations – Ominde Report of 1964

March 16, 2015, 5:14 am

Bureau of Internal Revenue: Regional Offices (Directory)

January 9, 2014, 11:06 pm

GO 53 on Enhancement of Ex-gratia upto 5 Lakhs Toddy Tappers in Telangana

March 26, 2017, 11:23 pm

Cakewalk CA-2A Leveling Amplifier v2.0.1.97 WiN, v2.0.1.96 OSX Incl Keygen

October 17, 2016, 7:20 am

Mp3 Download: Mdu - Kunjenjenjena

December 7, 2017, 8:16 am

How the kill the job , when DTP request running for long hours.

July 26, 2013, 2:41 am

Microsoft Intune から展開しているアプリのアップデートについて

October 17, 2016, 4:11 am

18-year-old girl was beaten for half an hour by two Northampton men in 'an...

September 1, 2017, 10:00 pm

Car crash in Dunton Bassett leaves driver in critical condition

October 7, 2014, 7:51 am

Macky 2, Two Others In Road Accident

March 29, 2015, 5:34 am

Application log 00000000000000089514: Could not convert queue DLVST90CLNT

May 14, 2015, 11:27 pm

Detroit mafia: D’Anna Brothers agree to plea deal

April 21, 2016, 6:56 am

Delivery block field greyed out using VA02

January 26, 2016, 2:52 pm

Muloraki Au

June 22, 2016, 1:44 am

【個人撮影】スマホのプライベート映像♪「中に出さないで///」カラオケ屋での生ハメ撮りが流出ｗ【リベンジポルノ】＠PornHub

October 12, 2017, 2:23 pm

BREAKING NEWS: Diamond Platnumz Is Reported Dead After Ghastly Car Accident

February 9, 2018, 4:56 am

FIAT 500 B0111 B0112

July 5, 2018, 10:31 am
Search
<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>