1. angular 引入 swiper
在引入swiper时,我首次是使用npm安装的,但是总是报swiper未定义, 在网上找的教程也没用,只好直接将swiper下载下来,直接将js, css文件引入到angular.json文件中:
2. 将swiper封装成组件, 新建一个swiper-slide compontent
html 代码
<div class="swiper-container">
<div class="swiper-wrapper">
<ng-content></ng-content>
</div>
</div>
ts 代码
import { Component, OnInit, AfterViewInit } from '@angular/core';
declare let Swiper: any;
@Component({
selector: 'app-swiper-slide',
templateUrl: './swiper-slide.component.html',
styleUrls: ['./swiper-slide.component.css']
})
export class SwiperSlideComponent implements OnInit, AfterViewInit {
mySwiper: any;
constructor() { }
ngOnInit() {
setTimeout(() => {
this.initSwiper();
}, 20);
}
ngAfterViewInit() {
}
initSwiper() {
this.mySwiper = new Swiper('.swiper-container', {
slidesPerView: 'auto',
freeMode: true,
observer:true,//修改swiper自己或子元素时,自动初始化swiper
observeParents:true,//修改swiper的父元素时,自动初始化swiper
});
}
}
使用:
<app-swiper-slide >
// self-slide 的内容是width:auto; heigth: auto; 因为我发现它滑动块的width, heigth 都是100%; 设置slidesPerView: 'auto'; 也没啥用
<div class="swiper-slide self-slide" >
// 滑动块内的内容
</div>
</app-swiper-slide>
注: 这只是一个简单的封装,没有加
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- If we need scrollbar -->
<div class="swiper-scrollbar"></div>
如果需要加上就ok。
最后,这个封装并不是很理想,跟我想要的不太一样,如果有更好的封装方法,请留言指导, 不胜感激。