我正在尝试在离子2应用程序中创建页面内的滑块组件.除非寻呼机点不显示,否则我已按预期工作.有关如何使用寻呼机的文档并不是很好.我在这里出错的任何想法？
<div class="slider-container">
<ion-slides pager="true">
<ion-slide>
<div class="slide">
<img src='assets/image/scoping.png' />
<p class="slide-title">TITLE 1</p>
<p class="slide-text">Body text 1</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/projectmgmt.png' />
<p class="slide-title">TITLE 2</p>
<p class="slide-text">Body text 2</p>
</div>
</ion-slide>
<ion-slide>
<div class="slide">
<img src='assets/image/satisfaction.png' />
<p class="slide-title">TITLE 3</p>
<p class="slide-text">Body text 3</p>
</div>
</ion-slide>
</ion-slides>
</div>
我也尝试了<ion-slides options="{pagination: true}">,<ion-slides pager="true">而且这些都没有奏效.
编辑:在浏览器中检查后,我看到正在使用这样的div容器呈现寻呼机:
<div class="swiper-pager hide">
所以我绝对没有使用正确的参数取消隐藏寻呼机.或者有一个错误.我正在使用Ionic v2.0.0.
我在 ion-slide 里面有一个组件，它是滚动不起作用
这是我的代码：
{{标签}}
<ion-slide style="height:100%">
<main-search></main-search>
</ion-slide>
<ion-slide>
<div style="height:100%">Page 2 </div>
</ion-slide>
我还是 Ionic 的新手，我想在我的网页中添加幻灯片。我使用了带有 pager = "true" 的 ion-slides。问题是分页项目符号与幻灯片内容重叠。我使用了检查元素来发现子弹的位置。似乎子弹被设置为位置：绝对。我不知道如何覆盖位置 CSS，因为项目符号在 shadow DOM 中。谢谢。
<ion-slides pager = "true">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
<ion-slide>
<h1>Slide 3</h1>
</ion-slide>
</ion-slides>
我有一个已经实现了离子幻灯片的 Ionic 4 项目。一切都很好，直到最近对 Ionic 进行了更新（不到一个月前），然后它们突然停止了工作。
在第一次加载时，它们似乎很好，但在之后的任何加载中：
第一次加载工作： 预期的离子载玻片图像
第二次加载没有： 离子载玻片损坏的图像
没有错误消息或警告，以下所有代码在 1 个月前都运行良好，此后没有进行任何更改。它只是随机破裂。
HTML：
<ion-slides #slides pager="true">
<ion-slide *ngFor="let option of options; let i = index">
<ion-card mode="md" [ngStyle]="{'background': borderColors[i]}">
<img style="object-fit: contain; border-radius: 20px; padding: 2px;" [src]="option.imageUrl">
</ion-card>
</ion-slide>
</ion-slides>
TS：
import { Component, Input, ViewChild } from "@angular/core";
import { IonSlides } from "@ionic/angular";
import { ContestOption } from "src/app/models/contest-model";
@Component({
selector: "app-results-swiper",
templateUrl: "./results-swiper.component.html",
styleUrls: ["./results-swiper.component.scss"]
})
export class ResultsSwiperComponent {
@Input() options …在 Vue.js 中创建幻灯片时出现以下错误：
[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/vue-next
at <Anonymous key=1 >
at <Anonymous pager="true" options= {initialSlide: 1, speed: 400} >
at <Anonymous fullscreen=true >
at <IonPage isInOutlet=true registerIonPage=fn<registerIonPage> >
at <Product Details ref=Ref< Proxy {…} > key="/products/1" isInOutlet=true ... >
at <IonRouterOutlet>
at <IonApp>
at <App>
Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new …我正在尝试实现Ionic2的幻灯片,但我找不到如何设置设置:
离子幻灯片"选项"已被弃用.请改用ion-slide的输入属性.
我可以找到'输入属性'(例如自动播放,速度,方向),但我不知道在哪里放置它.我觉得每一个例子确实[options]="slideOptions"在那里slideOptions都是设置,但导致没有结果等,弃用的通知.
我是离子v2和打字稿的新手,我可能会得到一个hacky解决方案来工作,但我想做得对.
HTML中包含ion-content:
<ion-slides [options]="slideOptions">
<ion-slide *ngFor="let item of items">
<img width="20%"src="{{item.thumb.source}}">
</ion-slide>
</ion-slides>
简化的类:从'ionic-angular'导入{Slides};
@Component({
selector: 'page-example',
templateUrl: 'example.html'
})
export class Example {
public items: any;
private slideOptions: any;
@ViewChild(Slides) slides: Slides;
constructor(private navCtrl: NavController, public navParams: NavParams) {
this.items = [];
this.albumInfo = navParams.get('item');
this.getSlides();
}
// This does nothing:
goToSlide() {
this.slides.slideTo(2, 500);
}
// This does nothing:
ngAfterViewInit() {
this.slides.autoplay = 2000;
} …我们如何禁用ionic4中离子幻灯片的缩放功能，我已经尝试在ion-slides元素上添加zoom =“ false”输入，但它不起作用，当我在屏幕上双击时仍在缩放图像并破坏设计。
我使用离子幻灯片如下：
<div *ngFor="let category of categories">
<h6 class="slide-title" [innerHTML]="category.name"></h6>
<ion-slides [loop]="true" [pager]="true" [slidesPerView]="3">
<ion-slide *ngFor="let product of category.products">
<img [src]="product.image" class="slide-image">
</ion-slide>
</ion-slides>
</div>
我收到以下错误：
未处理的承诺拒绝：模板解析错误：无法绑定到 'slidesPerView'，因为它不是 'ion-slides' 的已知属性。
<img [src]="product"): MainPage@12:43 ; 区域： ; 任务： Promise.then ；价值： ....
任何人都可以帮忙吗？
离子 -v 2.2.1
科尔多瓦-v 6.5.0
我正在我的 Ionic 4 应用程序中工作，我已经使用循环添加了滑块，我正在检查滑块是否已到达最后一个滑块，并且我已经检查过使用，isEnd()但它始终显示 true。
这是我的intro.page.html：
<ion-slides #slides pager="true" parallax="true" spaceBetween="0">
<ion-slide class="step-one" *ngFor="let item of splashdata">
</ion-slide>
</ion-slides>
<p class="myp2" (click)="next()">{{ NextSlide }}</p>
在此视图中，我在循环中显示滑块，还显示下一步和完成按钮。如果滑块到达最后一张幻灯片，它将显示完成，否则它将显示下一张。
这是我的intro.page.t：
export class IntroPage implements OnInit {
@ViewChild('slides') slides: IonSlides;
NextSlide: any;
constructor() { }
ngOnInit() {}
ionViewWillEnter(){
let me = this;
me.slides.isEnd().then((istrue) => {
console.log(istrue);
if (istrue) {
me.NextSlide = 'Finish';
} else {
me.NextSlide = 'Next';
}
});
}
next() {
this.slides.slideNext();
}
}
在此 ts 文件中，我已使用进行了检查， …
我有一个包含ion-slides元素的模式。在主页中，我有(click)使用滑块打开模态的图像的缩略图。我需要让滑块slideTo选择缩略图的索引，但还没有让它工作。
我已经完成将正确的索引传递给模态并验证它记录到控制台。在ionic 4 docs 中，我们被定向到swiper docs，在那里可以看到该slideTo方法存在，但是当滑块由 ionic 初始化时，我不知道如何使用它。我按照教程让模态和滑块运行，除了在右侧幻灯片上打开滑块外，一切都很好。我尝试了很多方法来遵循 swiper 文档。此外，滑块的缩略图数组和图像数组是相同的，因此索引匹配。
这里是模态/滑块的 ts 文件：
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { NavParams, ModalController } from '@ionic/angular';
@Component({
selector: 'app-zoom-modal',
templateUrl: './zoom-modal.component.html',
styleUrls: ['./zoom-modal.component.scss'],
})
export class ZoomModalComponent implements OnInit {
images: any;
index: number;
img: any;
@ViewChild('slider', { static: false })slider: ElementRef;
sliderOpts = {
zoom: {
maxRatio: 3,
},
slideTo: this.index // …我想手动移到下一张幻灯片，但出现错误。我试过这样：
<ion-slides #sliderRef pager="true" (ionSlideWillChange)="onSlideChangeStart($event)">
<ion-button (click)="slideNext()">Next</ion-button>
并在 ts 文件中：
import { Component, OnInit, ViewChildren, ElementRef } from '@angular/core';
import { IonSlides } from '@ionic/angular';
export class AppointmentPage implements OnInit {
@ViewChild('sliderRef', { static: true }) protected slides: ElementRef<IonSlides>;
constructor(){}
async slideNext(): Promise<void> {
await this.slides.nativeElement.slideNext();
}
...
}
通过调用 slideNext() 我有这个错误：
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'slideNext' of undefined
ion-slides ×11
angular ×5
ionic4 ×5
ionic2 ×3
javascript ×2
angular7 ×1
ios ×1
pager ×1
pagination ×1
swiper ×1
typescript ×1
vue.js ×1
vuejs3 ×1