我正在使用幻灯片和幻灯片中的卡片,我可以毫无问题地加载数据。我遇到离子无限滚动事件的问题,因为当我在卡上重新加载更多数据时,它可以正确加载它们,但是当我更换幻灯片时,活动幻灯片保持与上一张幻灯片的高度相同。 我已经搜索了有关它的信息,并且有一个名为“ autoHeight”的属性,该属性在滑块设置中设置为true。当我这样做并从0重新加载数据时,幻灯片会向我显示卡数据的一小部分,但几乎不显示它们。我附上有问题的图片:
我知道代码很长,请尽我所能对其进行总结,请对此案的相关道歉。 作为附件,我在论坛上看到了有关此问题的信息,并且看到了名为“ updateAutoHeight”的ionSliders函数,但到目前为止我无法使其工作:
@ViewChild(IonSlides)幻灯片:IonSlides; this.slides.updateAutoHeight(400);
您可以提供的所有帮助,即使他们有想法,我也将不胜感激,因为现在我不知道该怎么办才能使我的卡片高度正常工作。我初始化应用程序或添加更多数据
<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();
});
}
}
}