将水平滚动条添加到Ionic2的离子滑块
问题描述:
我使用的是Ionic2的ion-slides
,它对我来说工作正常。将水平滚动条添加到Ionic2的离子滑块
<ion-slides [options]="extraOptions">
<ion-slide *ngFor="let slide of slides">
<img src="{{slide.image}}" />
</ion-slide>
</ion-slides>
我想补充一个水平滚动条如下所示的组队,探索API中http://idangero.us/swiper/api/#.V6Lcx8twbqA(例13)作为文档提到组队,探索什么是用于ion-slides
。在<div class="swiper-wrapper">
标签后source code for that example有<div class="swiper-scrollbar"></div>
。
问题是Ionic生成HTML,所以如何添加滚动条功能。
要将分页符号添加到滑块,我只需在ion-slides
标记中添加pager
属性指令。是否有类似于horizental滚动条的东西?
答
这不能通过离子的离子幻灯片组件完成。从这里的作者之一见回复:https://forum.ionicframework.com/t/how-to-add-horizontal-scrollbar-to-slides/59450/3?u=brightpixels
Not at the moment. We've tried to keep the Slides API much simpler than the original Swiper API. But we plan on revisiting this post 2.0 final
我已经通过直接使用刷卡库并创建自己的组件解决了这一点。
- 通过NPM安装模块:
npm install swiper
- 在组件文件的顶部
declare var require
- 然后
var swiper = require('swiper')