可以尝试在SortableJS的onEnd回调函数中重新初始化Swiper实例。以下是代码示例:
import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
import Sortable from 'sortablejs';
import Swiper from 'swiper';
@Component({
selector: 'app-example',
template: `
`
})
export class ExampleComponent implements AfterViewInit {
@ViewChild('sortable', { static: true }) sortableEl: ElementRef;
swiper: Swiper;
items = ['Item 1', 'Item 2', 'Item 3'];
ngAfterViewInit() {
Sortable.create(this.sortableEl.nativeElement, {
onEnd: () => {
if (this.swiper) {
this.swiper.destroy(true, true);
this.swiper = null;
}
setTimeout(() => {
this.swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
clickable: true
}
});
});
}
});
}
}
在上面的代码中,我们在onEnd回调函数中先销毁旧的Swiper实例(如果存在),然后等待一段时间(setTimeout),重新初始化Swiper实例。这将确保使用SortableJS进行排序操作后,Swiper导航仍然能够正常工作。