目录
前言
小编在项目中用到了侧滑栏，单条记录ion-item中实现侧滑栏“编辑、删除功能效果”，具体的实现过程基本上没有什么难点，主要借鉴了前人的经验，项目中有类似的页面，帮助我去实现，然而其中也是遇到了一些难点，如何调整样式ion-row的样式等，通过寻求同事的帮忙，终于对于样式的调整有了一定的认识和了解。
侧滑栏效果图
一、侧滑栏效果图
二、编辑效果图
侧滑栏ion-item-sliding
一、HTML代码
<ion-list lines="none" inset="true" class="Single-list" style=" border-radius:8px;">
<ion-item-sliding *ngFor="let itemclass of brainclasslist" #slide>
<ion-item style="padding-bottom:5%;height:100%;">
<!-- 使用ion-row行括住一条记录 -->
<ion-row style="width: 100%">
<!--第一列 其中包含两列ion-col 每列的宽度为6-->
<ion-col size="6" style="top:5%;" (click)="gotobrainlist(itemclass)">
<ion-row>
<ion-icon style="font-size: 24px;color:#99CC33;" name="contacts"></ion-icon>
<ion-label>{{itemclass.theme}}</ion-label>
</ion-row>
<ion-row style="margin-top: 10%; padding-left: 14%">
<div>{{itemclass.creator}}</div>
</ion-row>
</ion-col>
<!-- 第二列 其中包含两列ion-col 每列的宽度为6-->
<ion-col size="6">
<ion-row style="padding-left: 45%;">
<span>{{itemclass.classNumber}}</span>
</ion-row>
<ion-row style="padding-left: 35%;" *ngIf="itemclass.isEnd==0">
<span>
<ion-button style="padding-top:11%; font-size: 14px" shape="round" (click)='endClass(itemclass)'>结束班课</ion-button>
</span>
</ion-row>
<ion-row style="padding-left: 35%;" *ngIf="itemclass.isEnd==1">
<span style="padding-top:5%;font-size: 14px;margin-top: 10px;margin-left: 20px;">已结束</span>
</ion-row>
</ion-col>
</ion-row>
</ion-item>
<!-- 侧滑栏的按钮 -->
<ion-item-options side="end" >
<ion-button *ngIf="itemclass.isEnd==1" color='danger' expand="full" style="width:15%;height:90%" (click)='deleteMyClass(itemclass,slide)'>删除</ion-button>
<ion-button *ngIf="itemclass.isEnd==0" color='primary' expand="full" style="width:15%;height:90%" (click)='editMyClass(itemclass,slide)'>编辑</ion-button>
</ion-item-options>
</ion-item-sliding>
</ion-list>二、代码结构
1.一层结构 <ion-list></ion-list>
只需设计一下样式，class定义，style编写；
<ion-list lines="none" inset="true" class="Single-list" style=" border-radius:8px;">
...
</ion-list>2.二层结构<ion-item-sliding></ion-item-sliding>
标签中包含： 循环语句*ngFor 与 #slide
<ion-item-sliding *ngFor="let itemclass of brainclasslist" #slide>
...
</ion-item-sliding>3.三层结构 <ion-item></ion-item>和<ion-item-options></ion-item-options>
<ion-item>标签体中包含了<ion-row> <ion-col> 标签，主要是为规划布局，使用这两个标签，更加容易实现排版效果，同时使用这两个标签，不能够自定义调整width的属性，只能通过设计<ion-col>的个数以及size属性实现，保证布局样式的平衡性。
<ion-item-options>标签中包含了侧滑显示的按钮：
<ion-item-options side="end" >
<ion-button *ngIf="itemclass.isEnd==1" color='danger' expand="full"
style="width:15%;height:90%" (click)='deleteMyClass(itemclass,slide)'>删除</ion-button>
<ion-button *ngIf="itemclass.isEnd==0" color='primary' expand="full"
style="width:15%;height:90%" (click)='editMyClass(itemclass,slide)'>编辑</ion-button>
</ion-item-options>三、ts代码---编辑弹框-AlertController
1.html页面点击编辑按钮，获取itemclass对象数据，传到editMyClass方法中，并激发方法： this.presentAlertPrompt()
/**
* 编辑我创建的班课
* @param itemclass
* @param node
* @author 冯浩月
* @since 2019年3月2日11:42:14
*/
editMyClass(itemclass: any, node: any) {
node.close();
this.itemclass = itemclass; // 获取班课id
this.presentAlertPrompt();
}
/**
* 获取数据，编辑班课名称
* @param className
* @author 冯浩月
* @since 2019年3月2日21:31:51
*/
editOk(className: any) {
const url = "brainstorming-web/class/modify";
this.itemclass.theme = className;
const body = JSON.stringify(this.itemclass);
this.http.put(url, body).subscribe(
res => {
if (res.json().id !== undefined && res.json().id !== null) {
super.showToast(this.toastCtrl, '修改班课成功');
this.getClassMessage();
} else {
super.showToast(this.toastCtrl, '修改班课失败');
}
}
);
}2. this.presentAlertPrompt() 此方法，调用方法editOk，实现前后端交互，修改名称。
/**
* 编辑班课名称弹出框
* @author 冯浩月
* @since 2019年3月3日08:18:10
*/
async presentAlertPrompt() {
const alert = await this.alertController.create({
header: '编辑班课名称',
inputs: [
{
name: 'className',
type: 'text',
placeholder: '班课名称',
value:this.itemclass.theme
}
],
buttons: [
{
text: '取消',
role: 'cancel',
cssClass: 'secondary',
handler: () => {
return;
}
}, {
text: '确定',
handler: data => {
if (data.className.trim() === '') {
super.showToast(this.toastCtrl, '请输入班课名称');
this.presentAlertPrompt();
} else {
this.editOk(data.className);
}
}
}
]
});
await alert.present();
}小结
实现这样一个功能，除了借鉴同事已经实现的效果，同时按照自己的想法加上了一些不一样的效果，就是编辑弹窗，AlertController的使用，借鉴了ionic官网，并成功实现了效果。在这个功能实现过程中，自己对于ion-row标签有了一定的认识和了解，同时也感谢同事的帮忙，调整ion-col样式。
感谢您的访问！