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方法需在拖拽结束后调用,否则会卡住。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101149.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...