当我在 ionic 4 中返回时,ion slide 不工作
ion slide is not working when i navigate back in ionic 4
自动播放滑块不工作
我尝试了给定堆栈溢出的所有解决方案对我来说没有任何效果我正在使用 ionic4 slide
我最近 6 天一直在尝试这个,但没有得到解决方案,请告诉我正确的解决方案,以便我可以解决这个问题
@ViewChild('sliderRef', { static:false }) slides: IonSlides;
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
loop:true,
autoplay:{disableOnInteraction:false}
}
ionViewWillEnter(){
this.sliderThree =
{
slidesItems: [
{
id: "../../assets/images/market.jpg",
name:"Sumo"
},
{
id: "../../assets/images/mobile.jpg",
name:"Shelcal 500"
},
{
id: "../../assets/images/test.jpg",
name:"Orofer Xt"
},
]
};
this.slide.update();
}
async slideChange() {
console.log("method called");
this.slides.update();
}
<ion-slides [options]="option" #sliderRef (ionSlideDidChange)="slideChange()">
<ion-slide *ngFor="let item of sliderThree.slidesItems" style="width:90%;height:20vh;" (click)="labTest()">
<ion-card style="width:90%;height:20vh;
display:-webkit-box;
overflow:hidden;border:1px solid grey;" >
<img [src]="item.id" style="width:100%;height:20vh;
display:-webkit-box;" alt="">
</ion-card>
</ion-slide>
</ion-slides>
有类似问题请尝试在 ionViewDidEnter
手动启动并在 ionViewDidEnter
停止。
但首先从选项中删除循环和自动播放属性,如下所示:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000
}
然后像这样处理启动和停止:
ionViewDidEnter(){
this.slide.startAutoplay();
}
ionViewDidLeave(){
this.slide.stopAutoplay();
}
编辑:
如果你想让它在选项卡之间工作,请像这样使用自动播放选项:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
autoplay: {
delay: 1000,
disableOnInteraction: false
}
}
自动播放滑块不工作
我尝试了给定堆栈溢出的所有解决方案对我来说没有任何效果我正在使用 ionic4 slide
我最近 6 天一直在尝试这个,但没有得到解决方案,请告诉我正确的解决方案,以便我可以解决这个问题
@ViewChild('sliderRef', { static:false }) slides: IonSlides;
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
loop:true,
autoplay:{disableOnInteraction:false}
}
ionViewWillEnter(){
this.sliderThree =
{
slidesItems: [
{
id: "../../assets/images/market.jpg",
name:"Sumo"
},
{
id: "../../assets/images/mobile.jpg",
name:"Shelcal 500"
},
{
id: "../../assets/images/test.jpg",
name:"Orofer Xt"
},
]
};
this.slide.update();
}
async slideChange() {
console.log("method called");
this.slides.update();
}
<ion-slides [options]="option" #sliderRef (ionSlideDidChange)="slideChange()">
<ion-slide *ngFor="let item of sliderThree.slidesItems" style="width:90%;height:20vh;" (click)="labTest()">
<ion-card style="width:90%;height:20vh;
display:-webkit-box;
overflow:hidden;border:1px solid grey;" >
<img [src]="item.id" style="width:100%;height:20vh;
display:-webkit-box;" alt="">
</ion-card>
</ion-slide>
</ion-slides>
有类似问题请尝试在 ionViewDidEnter
手动启动并在 ionViewDidEnter
停止。
但首先从选项中删除循环和自动播放属性,如下所示:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000
}
然后像这样处理启动和停止:
ionViewDidEnter(){
this.slide.startAutoplay();
}
ionViewDidLeave(){
this.slide.stopAutoplay();
}
编辑:
如果你想让它在选项卡之间工作,请像这样使用自动播放选项:
option = {
slidesPerView: 1,
spaceBetween: 10,
centeredSlides: true,
speed:1000,
autoplay: {
delay: 1000,
disableOnInteraction: false
}
}