话不多说,先看一下效果:
上方的轮播图是循环轮播,可以通过手动来控制,而下方的公告栏则无法通过手动控制。一个界面出现两个Swiper组件的需求。
数据来源:图片URL和公告内容都是通过*ngFor命令来读取ts文件中的数据然后渲染出来的,此处需要注意的是,*ngFor的页面渲染和Swiper新建时候的先后顺序,如果顺序错误,则无法出现自动滚动的效果。
第一步:angular4.x工程引用外部js和css文件。(此处使用的是Swpier3)首先在官网下载Swiper3的js和css文件下载资源
我们将下载好的swiper文件放置到assets文件夹下面的css文件和javaScript文件中:
然后在WebStrom编译器的命令行中输入如下命令:
npm install @types/swiper --save --生产环境
npm install @types/swiper --save-dev --开发环境
因为ts文件不能准确的识别js的语法,所以需要用ts中的interface接口,将js转化为ts并且暴露出来。
接下来在跟补录的index.html文件中引用这两个文件:
<link href="assets/css/swiper.css" type="text/css" rel="stylesheet">
<script src="assets/javascript/swiper.min.js" type="text/javascript" charset="UTF-8"></script>
然后要做的就是申明全局的Swiper对象,因为后面在ts文件中需要用到:
在typings.d.ts文件中申明
接下来要做的就是撸代码了,不多说了,我直接把这两个组件的js css html文件拿上来:
<!--轮播图-->
<div class="swiper-container swiper-banner">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-item-img" *ngFor="let img of imgs">
<img class="swiper-img" src="{{img.Url}}">
</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
<!--滚动抢单提示-->
<div class="massage-flex-div">
<img class="logo-56" src="./assets/image/icon_rad_nor.png">
<div class="swiper-container swiper-message">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-no-swiping swiper-item-text" *ngFor="let arr of messageArray">{{arr.message}}</div>
</div>
</div>
</div>
//新的轮播效果样式
.swiper-banner {
height: 14vh;
display: flex;
justify-content: center;
align-items: center;
margin-top: 1.4vh;
margin-bottom: 1.8vh;
}
.swiper-slide {
//text-align: center;
//font-size: 18px;
//background: #f60c33;
/* Center slide text vertically */
//display: -webkit-box;
//display: -ms-flexbox;
//display: -webkit-flex;
//display: flex;
//-webkit-box-pack: center;
//-ms-flex-pack: center;
//-webkit-justify-content: center;
//justify-content: center;
//-webkit-box-align: center;
//-ms-flex-align: center;
//-webkit-align-items: center;
//align-items: center;
}
.swiper-img{
width: 100%;
height: 100%;
border-radius: 10px;
}
.swiper-item-img{
padding-left: 4.17vw;
padding-right: 4.17vw;
}
.swiper-div{
width: 100%;
height: 100%;
padding-left: 4.17vw;
padding-right: 4.17vw;
border-radius: 15px;
background-color: #f60c33;
}
.swiper-message{
width: 100%;
height: 22px;
overflow: hidden;
}
.swiper-item{
width: 100%;
height: 100%;
border-radius: 15px;
overflow: hidden;
}
.swiper-item-text{
display: flex;
flex-direction: row;
align-items: center;
padding-left: 4.17vw;
font-size: 2.18vh;
color: #666666;
}
最后的js需要说明一下,在angular4.x的生命周期中,我没有放在ngOnInit里面,因为这样就会先注册组件而后渲染,导致失去滑动效果,所以我选择的生命周期函数是ngAfterViewInit函数:
ngAfterViewInit(){
this.initView();
}
public initView(){
var swiper = new Swiper('.swiper-banner', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true,
});
var swiper1 = new Swiper('.swiper-message', {
pagination: '.swiper-pagination',
spaceBetween: 5,
centeredSlides: true,
autoplay: 3500,
autoplayDisableOnInteraction: false,
loop: true,
direction: 'vertical'
});
}
其他的样式自己定义,数据自己造,至于如何使用*ngFor大家可以去看angular4.x的Api。