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属性，不然不会有拖拽按钮出现。export class HomePage {fieldList = [{name：1}];ngOnInit() { let fields = [{name: “1”, type: null, jsonobject: ‘’, level: 0, index: 0, order: true}, {name: “2”, type: null, jsonobject: ‘’, level: 1, index: 0, order: true}, {name: “3”, type: null, jsonobject: ‘’, level: 1, index: 1, order: true}, {name: “4”, type: null, jsonobject: ‘’, level: 2, index: 0, order: true}, {name: “5”, type: null, jsonobject: ‘’, level: 2, index: 1, order: true}, {name: “6”, type: null, jsonobject: ‘’, level: 2, index: 2, order: true} ]; let index = []; // 获取层次的最大值 let maxLevel = 0; fields.forEach((item) => { if (item.level > maxLevel) { maxLevel = item.level; } }); console.log(‘mac’, maxLevel); for (let i = 0; i < maxLevel + 1; i++) { for (var j = 0; j < fields.length; j++) { if (fields[j].level === i) { index.push(j); break; } } } // 添加层次说明 this.fieldList = []; for (let i = 0; i < fields.length; i++) { let j = index.indexOf(i); if (j > -1) { this.fieldList.push({ name: “第” + (j + 1) + ‘层’, type: null, jsonobject: ‘’, level: fields[i].level, index: 0, order: false }); } this.fieldList.push(fields[i]); } if (index.length < fields.length) { this.fieldList.push({ name: “第” + (index.length + 1) + ‘层’, type: null, jsonobject: ‘’, level: maxLevel + 1, index: 0, order: false }); } console.log(this.fieldList);}reorder(ev) { try { if (ev.detail.to === this.fieldList.length) { ev.detail.to -= 1; } // let from = this.fieldList[ev.detail.from]; // let to = this.fieldList[ev.detail.to]; if (ev.detail.from < ev.detail.to) { this.fieldList[ev.detail.from].level = this.fieldList[ev.detail.to].level; console.log(‘aaa’, this.fieldList); // 添加和删除字段 this.fieldList.splice(ev.detail.to + 1, 0, this.fieldList[ev.detail.from]); this.fieldList.splice(ev.detail.from, 1); // this.fieldList.map((item, index) => { // if (item.level === to.level) { // return this.fieldList[index].index = i; // } else if (item.level > from.level) { // return; // } // }); console.log(‘bbb’, this.fieldList); } else if (ev.detail.from > ev.detail.to) { this.fieldList[ev.detail.from].level = this.fieldList[ev.detail.to - 1].level; console.log(‘from’, this.fieldList[ev.detail.from]); console.log(’to’, this.fieldList[ev.detail.to]); this.fieldList.splice(ev.detail.to, 0, this.fieldList[ev.detail.from]); console.log(‘111’, this.fieldList); this.fieldList.splice(ev.detail.from + 1, 1); console.log(‘222’, this.fieldList); } else { ev.detail.complete(); return; } // 层次修改(1、层次是否为空) // let filter = []; // this.fieldList.forEach((item, index) => { // if (item.order === false) { // filter.push({field: item, index: index}); // } // }); // console.log(‘chishi’, filter); // filter.forEach((item, index) => { // item.field.name = ‘第’ + (index + 1) + ‘层’; // this.fieldList[item.index] = item.field; // }); // console.log(‘长度’,filter.length) // // console.log(‘长度’,this.fieldList.length) // if (filter.length < this.fieldList.length/2) { // this.fieldList.push({ // name: “第” + (filter.length + 1) + ‘层’, // type: null, // jsonobject: ‘’, // level: filter.length + 1, // index: 0, // order: false // }); // } let fields = this.fieldList.filter((item) => { return item.order === true; }); console.log(‘chishi’, fields); let index = []; let maxLevel = 0; fields.forEach((item, index, array) => { if (item.level > maxLevel) { maxLevel = item.level; } }); for (let i = 0; i < maxLevel + 1; i++) { for (var j = 0; j < fields.length; j++) { if (fields[j].level === i) { index.push(j); break; } } } console.log(‘index’, index); // 添加层次说明 this.fieldList = []; index.sort(); for (let i = 0; i < fields.length; i++) { let j = index.indexOf(i); if (j > -1) { this.fieldList.push({ name: “第” + (j + 1) + ‘层’, type: null, jsonobject: ‘’, level: fields[i].level, index: 0, order: false }); } this.fieldList.push(fields[i]); } console.log(this.fieldList); if (index.length < fields.length) { this.fieldList.push({ name: “第” + (index.length + 1) + ‘层’, type: null, jsonobject: ‘’, level: maxLevel + 1, index: 0, order: false }); } console.log(this.fieldList); ev.detail.complete(); } catch (e) { return; }}get() { console.log(this.fieldList); let fields=this.fieldList.filter((item)=>{ return item.order==true; }) console.log(fields); var levels=[]; fields.forEach((item,index)=>{ if(levels.indexOf(item.level)===-1){ // 新的level值,加入到levels levels.push(item.level); } }); levels.sort(); console.log(levels); // 改变字段的level和index levels.map((level,index)=>{ let i=0; fields.forEach((item)=>{ if(item.level===level){ item.level=index; item.index=i; i++; } }) }) console.log(fields);}}
...