离子幻灯片resize()不起作用
离子幻灯片是一个基于Angular框架的移动应用开发框架，用于构建跨平台的移动应用程序。resize()是离子幻灯片中的一个方法，用于重新计算幻灯片的尺寸和布局。然而，如果resize()方法不起作用，可能有以下几个可能的原因和解决方法：
- CSS样式问题：检查幻灯片的CSS样式，确保没有设置固定的宽度和高度，而是使用相对单位或百分比来适应不同的屏幕尺寸。可以使用CSS媒体查询来针对不同的屏幕尺寸设置不同的样式。
- JavaScript错误：检查是否有JavaScript错误导致resize()方法无法执行。可以在浏览器的开发者工具中查看控制台输出，以确定是否有任何错误信息。确保在调用resize()方法之前，所有必要的JavaScript文件都已正确加载。
- 事件绑定问题：确保resize()方法已正确绑定到相应的事件上。在离子幻灯片中，通常会使用ionViewDidEnter()方法来处理页面进入时的事件。在该方法中，可以调用resize()方法来重新计算幻灯片的尺寸和布局。
- 幻灯片内容问题：如果幻灯片中包含了图片或其他动态内容，可能需要在resize()方法中手动更新这些内容的尺寸。可以使用JavaScript或Angular的相关方法来获取屏幕尺寸，并根据需要调整内容的大小。
总结起来，如果离子幻灯片的resize()方法不起作用，需要检查CSS样式、JavaScript错误、事件绑定和幻灯片内容等方面的问题，并进行相应的调整和修复。在腾讯云的产品中，可以使用云服务器、云存储、云函数等服务来支持离子幻灯片的部署和运行。具体的产品介绍和链接地址可以参考腾讯云官方文档或咨询腾讯云的客服人员。
相关·内容
预期行为:当我将多个离子幻灯片组件添加到一个页面中时，我应该能够引用这些幻灯片并根据屏幕大小更新它们的属性。
当前行为:当我在一个页面上有多个离子幻灯片组件并尝试根据屏幕大小更新它们的属性时，只有最后创建的幻灯片组件才会使用新的设置进行更新。
MovieSliderComponent.html
<ion-slides #Slides class="slides" *ngIf="movies.length > 0" centeredSlides="true" loop="true" slidesPerView="
浏览 46提问于2019-03-19得票数 0
回答已采纳
1回答
我在“离子幻灯片”中的ngx-Chart的响应性方面遇到了问题，或者更准确地说，在“离子幻灯片”中的“离子网格”中的ngx-Chart。 为了使图表具有响应性，我发现了两条规则。有人说，您不应该在ngx-Chart中使用"view“参数。第二个是说，周围/父标签应该有一个大小。如果两者都为真，则图表应适应父级的大小。 我甚至让它在网格中工作(响应)--一个“普通”页面上的网格，但我不能让它在幻灯片中的网格中工作(响应)。 请看我在GitHub https://github.com/Joey73/ionic-ngx-charts.git上的例子-项目(页面:幻灯片中的Treemap和T
浏览 21提问于2019-06-03得票数 0
2回答
我搜索了一些东西，如果设备的屏幕很小的话，我可以查看一个离子幻灯片，否则应该是2个离子幻灯片，但我找不到解决方案。
例如，我使用这段代码查看1张幻灯片和其他幻灯片的一部分。
<ion-slides slidesPerView="1.125">
<ion-slide>
<h1>Slide 1</h1>
</ion-slide>
<ion-slide>
<h1>Slide 2</h1>
</ion-slide>
</ion-slides&
浏览 0提问于2018-04-01得票数 2
回答已采纳
7回答
我正在使用ion-slide-box，但问题是，我的ion-slides不是在同一高度，所以它将所有的ion-slides设置为高度1的大小。以下是一个例子
离子幻灯片1高度30 ion
离子幻灯片2高度100 ion
因此，ion-slide-box的高度将是100 So，这将在slide1中留下一个空白(70 So)。当用户使用该空格(70‘t)滑动时，slider无法工作。
有什么方法可以使slidebox工作在不同的幻灯片高度？
浏览 1提问于2015-02-09得票数 12
使用离子4离子幻灯片，我正在尝试使用getActiveIndex()获得当前点击的淤泥指数，因为它在下面不起作用。
<ion-slides #testSlider (ionSlideTap)="getIndex()">
<ion-slide>....</ion-slide>
</ion-slides>
@ViewChild('testSlider') slider: ElementRef; // first way
getIndex() {
this.slider.nativeElement.g
浏览 1提问于2019-01-05得票数 3
我有一个带离子滑动盒的视野
我在模板中的某个div上包含了一些简单的ng-hide动画
不起作用。
我删除了离子幻灯片盒elmt。
它起作用了!
有什么想法吗？
浏览 2提问于2016-03-21得票数 0
我有一些幻灯片，可能超过20张，在离子幻灯片盒里，每一张幻灯片都有离子视图标签，有些幻灯片有一个图像，可以放大。我遇到一些困难，当我点击一个按钮显示离子幻灯片盒的离子视图，它需要等待一段时间。有些是我想呈现的第一个幻灯片，另一些是在$timeout中呈现的。但我不知道该怎么做。有人知道如何实现这一目标吗？非常感谢。
补编：
浏览 5提问于2016-10-11得票数 0
回答已采纳
我必须用离子4自动播放离子幻灯片。但它不起作用。我已经尝试过了，请参考下面的代码 我使用了autoplay="true“，但仍然不起作用。 .html <div>
<ion-slides [options]="sliderConfig">
<ion-slide *ngFor="let cat of latestProducts">
<div class="slide-content">
<io
浏览 10提问于2019-05-14得票数 1
我使用的是拥有5 <ion-slide>的<ion-slide>。我想隐藏最后两个离子幻灯片在开始，然后想显示第4和第5幻灯片根据一定的条件。
我在第四和第五<ion-slide>中写了<ion-slide>。但不起作用。请帮帮忙。
浏览 2提问于2016-07-07得票数 0
回答已采纳
1回答
我正在做一个离子项目，其中我实现了离子幻灯片盒子。这个离子滑动盒总共有12张幻灯片。
我的问题是，当用户在最后一张幻灯片(第12张幻灯片)上时，如何实现转到新视图。现在我基本上已经创建了一个空的幻灯片(在幻灯片12之后)。因此，当我滑动最后一张幻灯片时，你们会看到，在离子幻灯片框转到新视图之前，幻灯片是空的。
因此，基本上我正在寻找一个解决方案，从最后一个幻灯片滑动到新的视图，而不创建一个空的幻灯片。
为了更好地说明这一点，请参阅我制作的简短视频：
欢迎任何帮助
浏览 1提问于2016-11-09得票数 0
我有一个简单的离子幻灯片元素，到目前为止它工作得很好。我唯一的问题是，当我改变设备方向时，因为它不会调整滑动元素的宽度。
html：
<ion-slides #slides>
<ion-slide>
<h2>Slide 1</h2>
</ion-slide>
<ion-slide>
<h2>Slide 2</h2>
</ion-slide>
<ion-slide>
<h2>Slide 3</h2>
</ion-
浏览 1提问于2017-12-12得票数 1
4回答
我在我的应用程序中使用了离子滑动盒。有时幻灯片的内容高度并不能填满整个内容。这意味着我在幻灯片底部有一个空白区域。在这种情况下，当用户滑动底部的空白处时，也应该能够滑动。然而，这是不起作用的，因为离子幻灯片的大小不是100%。我也不能将大小设置为100%。我已经尝试了以下几种方法：
.slider{
height:100%;
}
.slider-slide {
height: 100%;
min-height:100%;
}
使用上面的代码，幻灯片内容仍然不是100%。谢谢你的帮助。这是幻灯片框的html：
<ion-content>
<ion-slide
浏览 0提问于2016-02-08得票数 3
我正在使用离子幻灯片在ionic4，我想去下一个幻灯片手动点击按钮。我看过离子幻灯片文档，其中提到了slideNext方法。但是我不知道如何用这个方法来改变幻灯片。
浏览 2提问于2019-04-18得票数 2
回答已采纳
1回答
我一直在看到拉下拉链来刷新离子。然而，我想要实现类似于改变幻灯片与幻灯片上或幻灯片下降效果使用拉下姿态。
是否可以通过这种方式自定义离子刷新，还是严格意义上是要刷新？
我是否可以调用一个函数，在离子刷新器内部设置一个活动幻灯片，以便进行刷新？
我对这件事的指导也相当少。能告诉我如何用这种方式定制它吗？
我不认为我想在这里使用幻灯片下降姿态，因为它最终会改变幻灯片在屏幕上的任何地方下滑。我希望它发生在屏幕上方的图标上，就像离子刷新器一样。
浏览 2提问于2015-09-06得票数 1
回答已采纳
1回答
我使用离子幻灯片如下：
<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
浏览 3提问于2017-01-31得票数 1
回答已采纳
1回答
有没有办法在离子内容或离子滚动中使用CSS Scroll Sap点？如下所示：
-webkit-scroll-snap-type: mandatory;
-webkit-scroll-snap-points-y: repeat(100%);
我想在离子幻灯片页面(使用水平离子幻灯片)中有一些垂直的全页滚动。
任何帮助都是非常感谢的
浏览 11提问于2017-02-09得票数 2
无法在官方文件中使用离子幻灯片提供的方法。检查了这里的其他答案，但似乎都混淆了离子4和离子3，并提供了适用于离子3的答案。
我想得到幻灯片的活动指数。关于如何实现它的在线文档还没有完成。
浏览 0提问于2019-02-14得票数 1
回答已采纳
离子幻灯片中不支持dynamicBullets？
来自swiper.js和swiper.js的离子幻灯片支持dynamicBullets: boolean。
如何在离子幻灯片中使用dynamicBullets？
我甚至尝试将swiper.js注入到ionic项目中，但效果并不好。我认为ionic中的某个地方存在冲突错误，因为它是从swiper.js采用的
浏览 2提问于2018-01-24得票数 1
0回答
我正在从离子幻灯片盒子迁移到离子幻灯片。
我像这样使用了on-slide-changed和ion-slide-box：
<ion-slide-box on-slide-changed="slideChanged(index)" show-pager="false">
但我找不到离子幻灯片的等价物：
<ion-slides on-slide-changed="slideChanged(index)" options="data.sliderOptions" slider="data.slider"
浏览 3提问于2017-01-07得票数 0
回答已采纳
1回答
我正在做一个基于离子框架的项目。我想放弃‘幻灯片向上’和‘向下’页面过渡效果。有没有办法这么做。我试过使用ngAnimate，但它对我不起作用。如有任何帮助，将不胜感激。
浏览 3提问于2016-03-03得票数 0
回答已采纳
2回答
我正在创建Ionic 4加角应用程序。我用离子幻灯片逐个显示问题的数量。现在我要在每10秒之后移动离子幻灯片。
浏览 0提问于2019-05-24得票数 0
回答已采纳
1回答
我正在使用离子幻灯片中的离子网格。我想要实现的是-有最多8张卡将被放置在一个2*2离子网格上，这使得每个离子幻灯片上都有一个2*2离子网格。 但是牌的数量不是恒定的8张。当牌的长度超过4张时，我想再加一张离子幻灯片，剩下的牌将放在第二张离子幻灯片上。 这是我的HTML代码- <ion-slides pager>
<ion-slide>
<ion-grid>
<ion-row>
<ion-col *ngFor="let commodity of cardData" col-6>
浏览 20提问于2020-06-29得票数 0
回答已采纳
1回答
我用离子幻灯片找不到任何动态幻灯片，其中大部分是由离子幻灯片盒给出的，这是不推荐的，我用离子幻灯片创建动态寻呼机，但我无法实现，刷不只是显示第一张卡，我是离子任何想法的初学者。
我的Html代码：
<ion-slides pager loop="true" options="swiperOptions">
<ion-slide-page ng-repeat="employe in employees">
<h1>{{employe.firstname}}&
浏览 1提问于2016-03-09得票数 2
1回答
在下图中，我有两个DivB，每个DivB都在离子幻灯片中，它们水平移动，因为它们在离子幻灯片组件(DivA和DivB)中。
在DivA (蓝色)中，如下图所示，我有一个Div (DIV- scroll ) (红色)，它也应该有一个水平滚动。但是，当尝试在DIV滚动上滚动时，离子幻灯片会将整个DivA (蓝色)向左移动。
我该怎么做才能让Div DIV-SCROLL有自己的水平滚动？
浏览 18提问于2020-06-04得票数 0
2回答
我试图在我的应用程序中添加离子幻灯片，但我面临的问题是，我不知道如何解决这个问题。我简单地将离子幻灯片示例添加到我的页面中：
<ion-slides>
<ion-slide>
<h1>Test</h1>
</ion-slide>
<ion-slide>
<h1>Test2</h1>
</ion-slide>
<ion-slide>
<h1>Test3</h1>
</ion-slide>
<
浏览 0提问于2018-03-08得票数 0
回答已采纳
1回答
当滑块中只有一张幻灯片时，我希望隐藏离子滑块分页。我在离子论坛上找到了这个帖子，并尝试了一下，但我认为它一定是针对离子v1或v2的，因为它在离子v3中出现了一个错误。
如果只有一个图像幻灯片，有没有什么特殊的条件或方法可以用来隐藏分页？
浏览 0提问于2018-09-13得票数 0
下面是离子幻灯片盒中的演示flex
如果我取消评论离子幻灯片盒，柔印盒停止工作，但其他工作。
我该怎么解决这个问题？
编辑:这就是它现在的样子：
然而，我希望得到这个：
浏览 0提问于2015-08-27得票数 1
回答已采纳
我在我的项目中使用了离子幻灯片。代码如下： <ion-grid class="ion-margin-left">
<ion-slides [options]="slideConfig">
<ion-slide *ngFor="let item of items">
<ion-card style="margin-right: 2px">
<div class="img-container&
浏览 13提问于2020-01-20得票数 0
1回答
我有一种运行良好的离子幻灯片：
首先，我锁定幻灯片，直到用户回答问题；然后单击next按钮解锁滑动到下一个幻灯片(问题)等。
这很好，但当我仍然在第一张幻灯片或任何幻灯片中关闭该模式，然后再次打开该模型时，第一张幻灯片将正常显示，但当用户单击“下一步”时，将不会出现下一张幻灯片，直到我调整窗口大小或进行横向定位或从电话窗口移动到普通浏览器窗口。
有人知道问题出在哪里吗？
离子cli : 4.0.2
离子角: 3.9.2
角心: 5.0.0
一些代码:也许会有帮助：
ngAfterViewInit() {
this.assessSlides.autoHeight = true;
}
浏览 0提问于2018-08-10得票数 0
3回答
如果‘离子滑块’是一个角组件，那么验证它是这个模块的一部分。
如果‘离子幻灯片’是一个Web组件，那么将‘CUSTOM_ELEMENTS_SCHEMA’添加到
我使用离子幻灯片作为组件模板的一部分，但是当试图通过导入ComponentsModule来使用该组件时会出现这个错误。
浏览 1提问于2018-03-22得票数 0
2回答
我正在尝试在全屏幻灯片下面显示正常运行的内容。只有当您向下滚动时，才会显示其余内容。所以在加载时，幻灯片的高度和宽度应该仍然是100%。
我试着放一个与浏览器高度相同的页边距顶部(用js检测)，并把幻灯片放映位置放在绝对位置，但这不起作用……
很想听听你对此的看法，非常感谢！
示例： (我试图在不丢失幻灯片功能的情况下获得幻灯片下方的红色内容div )
浏览 7提问于2012-11-12得票数 0
回答已采纳
我目前使用离子幻灯片(在离子5)，并有问题获得选定的幻灯片索引为最后一张幻灯片。这个问题发生在我将slidesPerView设置为1.3之后。
当我试图滑到最后一张幻灯片时，即使是ionSlideDidChange事件也不会被触发(当我滑到其他幻灯片时，事件就会被触发)。
<ion-slides #subscriptionSlider [options]="slideOpts" pager="true" (ionSlideDidChange)="ionSlideDidChange()">
我认为Ionic方面有问题，因为如果我在最后一
浏览 9提问于2020-05-27得票数 3
回答已采纳
我希望缺省情况下在离子幻灯片框中显示页面导航点：
我试过这样做：
<ion-slide-box [options]="{pagination: true}">
<ion-slide>
<p> slide 1 </p>
</ion-slide>
<ion-slide>
<p> slide 2 </p>
</ion-slide>
</ion-slide-box>
但它对请帮助不起作用。
浏览 0提问于2018-11-05得票数 0
我在一个离子项目中工作，其中我使用离子幻灯片创建了滑块。我需要在那个滑块中显示一些多个产品。对于纵向视图，我已经显示了每张幻灯片1.25个视图(即，slidesPerView = 1.25)，这是完全正常的。我需要显示2.25幻灯片每个视图的景观视图。有没有动态实现的解决方案？
浏览 1提问于2021-02-20得票数 0
我一直在尝试一些其他的建议，我可以在这里找到这样，但没有一个有效。基本上，当窗口大小改变时，我需要更新(重新呈现)一个自定义指令。
我的代码如下：
angular.module('dynamicSlideBox', []).directive('hgDynamicSlideBox', [
'$timeout', '$ionicSlideBoxDelegate', '$ionicScrollDelegate', '$window', function($timeout, $ionicSlideBo
浏览 0提问于2017-11-01得票数 2
回答已采纳
我正在使用离子型软件开发android应用程序，我有一个离子幻灯片盒:这个幻灯片框在html中，它与状态Bill相关联。
<ion-slide-box>
<ion-slide>
</ion-slide>
<ion-slide>
</ion-slide>
</ion-slide-box>
如果用户不是来自状态a，我想显示第一张幻灯片，但以其他方式显示。
我正在使用$state.go('Bill')。有没有办法直接跳转到第二张幻灯片，以防它来自状态a。
浏览 2提问于2015-08-28得票数 0
回答已采纳
2回答
我想禁用离子幻灯片框交换。我检查了许多解决方案，这是错误的工作。
$scope.stop = function() {
$ionicSlideBoxDelegate.enableSlide(false);
return false;
};
将此内容添加到幻灯片框中
<ion-slide-box active-slide="stop()">
它工作得很好，但当我点击离子幻灯片框的内容时，它会显示这个错误
Error: [$compile:nonassign] Expression 'slid
浏览 1提问于2015-01-22得票数 1
我用bxSlider插件来制作这样的幻灯片。
ele = $('#slider2').bxSlider({
minslides: 4,
maxslides: 4
});
如果窗口大小小于480 so，我想将最小幻灯片更改为2，以使其响应。我试图绑定窗口调整大小属性，并将其与变量一起使用：
埃勒
$(window).resize(function(){
if($(document).width()<=480) w = 2; else w = 4;
ele.minslides = 2;
$('#slider2')
浏览 1提问于2014-07-10得票数 0
1回答
我创建了一个离子应用程序，目前我使用了离子应用程序的默认侧菜单。我在边菜单中添加了图片和我创建的提供商的文本，但现在的问题是，如果每次我打开应用程序时，按下菜单按钮，幻灯片就会延迟/滞后，但是当我第二次点击幻灯片时，幻灯片就不会延迟/滞后。每次应用程序打开时，侧菜单的延迟或延迟。这些是缓存问题还是提供者？
这是现状
每一个应用程序中的第一个点击就会出现侧菜单延迟。
第二次点击时不延迟侧菜单。
仅限Android
这是我的app.html
已更新
当我点击这个：
离子：
离子(离子CLI)：4.3.1 (/usr/local/lib/node_node/
浏览 0提问于2018-12-04得票数 2
回答已采纳
我在页面中有一个离子幻灯片，如下所示：
<ion-slides #schemasliderref [options]="schemaSliderOpts" (ionSlideDidChange)="slideChange()">
<ion-slide *ngFor="let schemaImage of schemaImages; let i = index">
<img [src]="schemaImage.url">
</ion-slide>
&
浏览 2提问于2020-02-20得票数 0
我试图在一个页面中创建两个“离子幻灯片”组件。但触摸滚动只能在一个滑块中使用。在第二个滑块上，它只与导航按钮一起工作。如何在一个页面中制作两个相同的“离子幻灯片”组件？
浏览 12提问于2017-02-15得票数 0
1回答
从DB动态添加离子幻灯片
、、、
我目前正在尝试离子疗法。我真的不习惯这种类型的网页开发，所以我可能完全偏离轨道。无论如何，我想访问一个SQLite DB并将结果添加到离子幻灯片框中.
我试着做这样的事：
function selectResultSuccess(tx, results)
{
var div = "";
div += "<ion-slide-box >";
for (var i = 0 ; i < len ; i++)
{
div+="<ion-slide>"
div+= results.rows.i
浏览 2提问于2015-07-10得票数 0
回答已采纳
离子滑块在最后一张幻灯片中隐藏next按钮，在第一张幻灯片中隐藏prev按钮尝试使用ngIf实现这一点，但它不工作离子4
<ion-slides #slides>
(...)
</ion-slides>
<button ion-button *ngIf="slides.isBeginning()">prev</button>
<button ion-button *ngIf="slides.isEnd()">Next</button>
浏览 1提问于2019-04-02得票数 2
回答已采纳
我想在离子幻灯片盒中禁用交换，所以我添加了以下内容
活动幻灯片=“滑动停止($index)”
在离子幻灯片盒中，如下所示
<ion-slide-box show-pager="false" ng-repeat="test in demoQuiz" active-slide="slidestop($index)">
并在controller.js中添加了这个
$scope.slidestop = function(index) {
$ionicSlideBoxDelegate.enableSlide(false
浏览 1提问于2014-12-18得票数 2
4回答
在离子方面，我们有滑块盒，我想要禁用滑动，.I，想让它在按钮上滑动，click.How，我能做到吗？
我已经在我的控制器中尝试过$ionicSlideBoxDelegate.enableSlide(false)，但是它不起作用。
根据这个链接，我必须禁用幻灯片框的作用域，但是如何访问元素的作用域并应用它呢？
浏览 3提问于2014-07-30得票数 4
回答已采纳
1回答
我正在用问题生成一堆幻灯片；最后一张幻灯片是对前面回答的问题的概述。在底部，我有一个提交按钮，希望在页面底部的(最后)幻灯片上始终可见。
我尝试了以下几点：
用一个不粘的离子按钮。
在按钮上使用CSS和“位置:粘性！重要；”
将除了按钮以外的所有东西都包装在一个离子卡内容中。
<ion-slide>
<ion-card>
<h1>Questions Overview</h1>
<ion-list *ngFor="let question of questions">
浏览 0提问于2019-06-28得票数 1
我使用有文档记录的的ion-slide指令，但是我找不到一种方法来隐藏寻呼机。我尝试设置pager属性，如下所示：
<ion-slides options="myOptions" pager="false" slider="mySlide[item.id]">
但是，这不起作用，寻呼机的子弹仍在显示。
是否有可能隐藏离子幻灯片寻呼机，如果可能，如何隐藏？
浏览 2提问于2016-02-15得票数 8
1回答
我在离子v5工作。我想幻灯片上的寻呼机点点图片，但它现在不起作用。
我的代码是：
<ion-slides pager="true">
<ion-slide>
<p>Page1</p>
</ion-slide>
<ion-slide>
<p>Page2</p>
</ion-slide>
<ion-slide>
<p>Page3</p>
</ion-slide>
浏览 3提问于2020-10-12得票数 1
1回答
我对离子幻灯片组件有问题。我在我的ion-slide中调用一个方法，但注意到这个方法经常被荒谬地调用，我不知道为什么。它也显著减缓了一切。
最初，这个方法被调用了900次(尽管我只显示了100张幻灯片)，而最轻微的幻灯片拖动也会再次触发900个方法调用，因此通过从第一张幻灯片到第二张幻灯片的滑动，该方法已经被触发了5000+次数，这取决于我滑动的速度。
知道为什么吗？我用的是离子4.4角5.0.3和离子角3.9.2。
模板
<ion-content>
<ion-slides>
<ion-slide *ngFor="let slide of sl
浏览 3提问于2017-12-10得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
云直播活动推荐
腾讯云开发者
