ionic4 ion-reorder-group组件拖拽改变item顺序

ionic4 ion-reorder-group组件拖拽改变item顺序

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;
    }
}

clipboard.png
customEvent继承自Event,添加了detail属性,包含from,to,complete,分别记录拖拽条目的前后index,complete方法需在拖拽结束后调用,否则会卡住。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101149.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 人工神经网络(ANN)及BP算法[通俗易懂]

    人工神经网络(ANN)及BP算法[通俗易懂]1什么是神经网络1.1基本结构说明:通常一个神经网络由一个inputlayer,多个hiddenlayer和一个outputlayer构成。图中圆圈可以视为一个神经元(又可以称为感知器)设计神经网络的重要工作是设计hiddenlayer,及神经元之间的权重添加少量隐层获得浅层神经网络SNN;隐层很多时就是深层神经网络DNN1.2从逻辑回归到神经元LinearRegres

  • psm倾向得分匹配法(倾向性评分匹配)

    原标题:一文读懂倾向得分匹配法(PSM)举例及stata实现(一)一、倾向匹配得分应用之培训对工资的效应政策背景:国家支持工作示范项目(NationalSupportedWork,NSW)研究目的:检验接受该项目(培训)与不接受该项目(培训)对工资的影响。基本思想:分析接受培训组(处理组,treatmentgroup)接受培训行为与不接受培训行为在工资表现上的差异。但是,现实可以观测…

  • Struts2—->action

    Struts2—->action

  • phpMyAdmin安装配置教程

    phpMyAdmin安装配置教程phpMyAdmin就是一种MySQL的管理工具,安装该工具后,即可以通过Web形式直接管理MySQL数据库,不需要通过执行系统命令来管理,非常适合对数据库操作命令不熟悉的数据库管理者。一、我们从phpMyAdmin官网上下载该软件,然后将该软件压缩放置xampp目录下。​二、复制PHP文件config.sample.inc文件并改名为config.inc,并做如下修改:​注意:因为XAMPP包含了Apache、MySQL、PHP、PERL,它在安装时

  • [html]js无缝循环滚动图片示例代码

    [html]js无缝循环滚动图片示例代码html代码<!–轮播图–><divid=”banner”><ul><li><ahref=”YunNan.html”><imgsrc=”./微信图片_20200621003327.jpg”>1</a></li><li><ahref=”Switzerland.html”><imgsrc=”./微信图片_20200621003339.

  • 各种Oracle索引类型介绍「建议收藏」

    各种Oracle索引类型介绍「建议收藏」逻辑上:Singlecolumn单行索引Concatenated多行索引Unique唯一索引NonUnique非唯一索引Function-based函数索引Domain域索引物理上:Partitioned分区索引NonPartitioned非分区索引B-tree:Normal正常型B树ReverKey反转型B树Bitmap位图索引索引结构:B-tree:

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号