我正在学习离子,并希望用离子滑块创建一个水平滚动.用户应该看到下一张幻灯片,但只展开.请参见下图.稍后我将使用* ngFor循环所有元素.我正在使用ionic2和angular2
我的代码看起来像这样:
<h3>For some sweet cocktails</h3><br>
<ion-slides
class="slide-wrapper"
slidesPerView="2"
spaceBetween="10"
autoplay="4300"
loop="true" >
<ion-slide>
<div [ngStyle]="{'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/img/bar.jpg)','background-repeat': 'no-repeat','background-size': 'cover', 'border-radius': '15px','display': 'block' }" class="inner2 center" >
<h1>Sin é</h1>
<h4>Live Music</h4>
</div>
</ion-slide>
<ion-slide>
<div [ngStyle]="{'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/img/bar.jpg)','background-repeat': 'no-repeat','background-size': 'cover', 'border-radius': '15px','display': 'block' }" class="inner2 center" >
<h1>Sin é</h1>
<h4>Live Music</h4>
</div>
</ion-slide>
<ion-slide>
<div [ngStyle]="{'background': 'linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(assets/img/bar.jpg)','background-repeat': 'no-repeat','background-size': 'cover', 'border-radius': '15px','display': 'block' }" class="inner2 center" >
<h1>Sin é</h1>
<h4>Live Music</h4>
</div>
</ion-slide>
</ion-slides>
解决方法:
github repo
首先在离子应用程序中安装swiper,
npm install –save angular2-useful-swiper
将swiper.css和swiper.js文件添加到ion.html的index.html
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.js"></script>
在appmodule.ts文件中导入swiper-module
import { SwiperModule } from 'angular2-useful-swiper';
并在导入数组中添加..
imports: [
BrowserModule,
IonicModule.forRoot(MyApp),
SwiperModule
],
在您要使用幻灯片的页面的html文件中,
<ion-content>
<swiper [config]="config">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color:red;">Slide 1</div>
<div class="swiper-slide" style="background-color:yellow;">Slide 2</div>
<div class="swiper-slide" style="background-color:green;">Slide 3</div>
<div class="swiper-slide" style="background-color:red;">Slide 4</div>
<div class="swiper-slide" style="background-color:yellow;">Slide 5</div>
<div class="swiper-slide" style="background-color:green;">Slide 6</div>
<div class="swiper-slide" style="background-color:red;">Slide 7</div>
<div class="swiper-slide" style="background-color:yellow;">Slide 8</div>
<div class="swiper-slide" style="background-color:green;">Slide 9</div>
<div class="swiper-slide" style="background-color:red;">Slide 10</div>
</div>
<div class="swiper-pagination"></div>
</swiper>
</ion-content>
我们将使用.ts文件中的配置来自定义滑块.例如.
config: Object = {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 0,
slidesPerView: 1.2, //use any number 1.8 or 4.2 or 7.3 etc..
direction: 'horizontal',
parallax: true,
freeMode: false,
fade: {
crossFade: true,
},
allowSwipeToPrev: true,
roundLengths: false,
effect: 'slide' //use cube,flip,coverflow or fade
};
原文地址:https://codeday.me/bug/20190701/1350701.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。