如何隐藏离子幻灯片寻呼机？

Posted 2023-02-26

【中文标题】如何隐藏离子幻灯片寻呼机？

【英文标题】：How to hide ion-slides pager?

【发布时间】：2016-02-15 14:23:42

【问题描述】：

我使用ion-slide 记录的here 指令，但我找不到隐藏寻呼机的方法。我尝试将 pager 属性设置为：

<ion-slides options="myOptions" pager="false" slider="mySlide[item.id]">

但是这不起作用，寻呼机项目符号仍在显示。

是否可以隐藏 ion-slides 寻呼机，如果可以，如何隐藏？

【参考方案1】：

官方解决方案：

options="pagination: false"

【讨论】：

@Andy 你能发布一个链接到提供这个解决方案的页面吗？我只知道idangero.us/swiper/api/#.VsiaPpN95E4 根据那个页面，分页需要设置为“带有CSS选择器的字符串或带有分页的容器的html元素”。它没有指定 false 是该字段的有效选项

不幸的是，我没有找到这个解决方案。 Ionic 论坛的一位用户两天前回答了我。这里是帖子：forum.ionicframework.com/t/…

要添加到此答案，如果您在模板之外设置选项，则需要将此选项对象传递给 <ion-slides> 指令，方法是将其分配给您的范围，例如 scope.options = pagination: false ，然后<ion-slides options="options">

这是正确的答案....但是为什么 ionSlides 的文档没有更新选项 API 和正确的委托？ ionicframework.com/docs/api/directive/ionSlides

【参考方案2】：

只需将其添加到您的css：

.swiper-pagination-bullet
   background:white!important;
   border-radius: 100%;
   height: 17px;   
   width: 17px;
   display: none;

希望对你有帮助

【参考方案3】：

只需删除pager。

例子：

<ion-slides pager loop autoplay="1500" class="auto_height"> ...

只是放（没有“寻呼机”）：

<ion-slides loop autoplay="1500" class="auto_height"> ...

【参考方案4】：

如果将这些幻灯片添加到ion-slide-box，您可以：

show-pager="false"

在ion-slide-box 上。有关详细信息，请参阅文档。

您也可以通过 css 隐藏它们，例如：

.slider-pager  display:none; 

【讨论】：

1.该项目使用ion-slides（我认为是出于性能原因）。可以和离子滑盒互换吗？

2. display:none 方法有效，尽管它有点 hack-ish。我希望找到官方的方法。不存在吗？

我对图书馆不太熟悉。从文档中，您可以完全从您的行中删除 pager 吗？

【参考方案5】：

我正在寻找这个问题的解决方案。我从 2 天开始就在这方面工作.. 但什么也没有。你解决这个问题吗？我添加了 .slider-pager display:none; 但点仍然存在！

【讨论】：

我没有解决这个问题，但能够使用这个 CSS 解决它：.swiper-pagination.swiper-pagination-clickable display: none;

【参考方案6】：

也许你可以这样做；

paginationType: 'custom',
paginationBulletRender: function (index, className) 
     return '';

这比pagination:false好