配置angular 8 angular / cdk / drag-drop库以与swiper一起使用https://www.npmjs.com/package/swiper

时间:2019-12-23 15:07:55

标签: javascript angular drag-and-drop swiper

我正在将@ 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类创建用于循环实现的项目:

enter image description here

enter image description here

@ angular / cdk / drag-drop库的方法不适用于这些新生成的swiper元素。 有什么方法可以尝试使@ angular / cdk / drag-drop库识别滑动重复的https://www.npmjs.com/package/swiper元素?

0 个答案:

没有答案