我正在将@ angular / cdk / drag-drop库与滑动器https://www.npmjs.com/package/swiper一起使用。
html文件:
<swiper [config]="config" (click)="onPaginationClick($event)" #usefulSwiper>
<div id="landing-apps-detail-list" class="fh swiper-wrapper app-list" cdkDropList
(cdkDropListDropped)="drop($event)" [cdkDropListData]="appListService.normalAppList"
[cdkDropListConnectedTo]="firstList" #secondList="cdkDropList" cdkDropListOrientation="horizontal">
<div class="swiper-slide pop" *ngFor="let dataItem of appListService.normalAppList" cdkDrag>
<a class="apps {{dataItem.icon}}" (click)="gotoAppPage(dataItem)" draggable="false"
style="cursor: pointer;">
<span class="icon"></span>
<span class="title" id="landing-detailApp{{ dataItem.appCode }}">{{ dataItem.appName }}</span>
</a>
</div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-next" id="landing-btnNext"></div>
<div class="swiper-button-prev"></div>
</swiper>
打字稿文件:
config: SwiperOptions = {
pagination: { el: '.swiper-pagination', clickable: true },
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
},
spaceBetween: 30,
loop: true,
loopFillGroupWithBlank: false, //hide/show virtual items
initialSlide: 0, // Slide Index Starting from 0
slidesPerView: 6, // Slides Visible in Single View Default is 1
slidesPerGroup: 6,
on: {
init: function () {
console.log('swiper initialized');
},
slideChange: function () {
console.log('swiper slideChange');
},
},
};
我需要在刷卡器中实现一个循环。 swiper使用swiper-slide-duplicate类创建用于循环实现的项目:
@ angular / cdk / drag-drop库的方法不适用于这些新生成的swiper元素。 有什么方法可以尝试使@ angular / cdk / drag-drop库识别滑动重复的https://www.npmjs.com/package/swiper元素?