2018在ionic项目中用到的组件有很多，这篇文章讲一讲ion-reorder-group这个组件的使用。刚开始我都不知道ionic4中已经封装了拖拽排序的组件，也是主管告诉我的。使用了这个组件的经历告诉我：仔细读官方文档，是没错的！
HTML中使用组件，代码如下
<!--一个排序组合一个ion-reorder-group-->
<ion-reorder-group [disabled]="false" (ionItemReorder)="reorder($event)">
<ion-item color="tertiary" *ngFor="let field of fieldList,let i=index">
<ion-label>{
{ field.name}}</ion-label>
<!--拖拽按钮-->
<ion-reorder slot="end"></ion-reorder>
</ion-item>
</ion-reorder-group>ionItemReorder绑定reorder事件，是item被拖拽时会被触发的事件，这个事件是ionic绑定在IonReorderGroup组件上的。记得一定要设置disabled属性，不然不会有拖拽按钮出现。
reorder(ev) {
try {
if (ev.detail.to === this.fieldList.length) {
ev.detail.to -= 1;
}
if (ev.detail.from < ev.detail.to) {
this.fieldList.splice(ev.detail.to + 1, 0, this.fieldList[ev.detail.from]);
this.fieldList.splice(ev.detail.from, 1);
}
if (ev.detail.from > ev.detail.to) {
this.fieldList.splice(ev.detail.to, 0, this.fieldList[ev.detail.from]);
this.fieldList.splice(ev.detail.from + 1, 1);
}
ev.detail.complete();
} catch (e) {
return;
}
}
customEvent继承自Event，添加了detail属性，包含from,to,complete,分别记录拖拽条目的前后index，complete方法需在拖拽结束后调用，否则会卡住。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/101149.html原文链接：https://javaforall.net
