前言
最近诸多事务缠身,没有太多的时间闲下心来写写文档,好不容易挤出点时间,写一下关于我这段时间,写的一个小demo功能,虽然功能比较简单。基本上是参考ionic3官网的文档,如果有哪里不对或者需要修改的地方,欢迎指教,本人虚心接受。
需求:效果图如下
场景描述:
在一些常见的移动应用中经常遇到一些,让用户进行帅选的数据,这些用户场景比较常见。为此我实现了一下一下常见的选择器:1,时间选择器,2,底部弹出选择器(适用于少量数据场景),3,普通选择器(适用于选择的数据量不大的场景),3,特殊选择器(适用于选择的数据量比较大的场景)
时间选择器:
主要借助于ionic3框架里面的一个ion-datetime组件实现的具体实现如下:
模板代码:
在视图控制层定义并初始化一个myDate的成员变量。
底部弹出选择器:
主要借助ionic3为我们提供的ActionSheetController组件具体实现看如下代码:定义一个presentActionSheet成员方法,在模板也触发该事件即可。
普通选择器:
普通选择器适用于数据量一般的场景下,实现原理主要借助主ionic3组件之ion-select的基础之上进行开发出属于自己的组件。
模板页如下:
控制层定义一个数据源如下:
特殊选择器:
特殊选择器主要适用于数据量比较多的场景下,并且带有搜索功能,检索出用户想要的结果,实现特殊选项器主要是借助于ionic3 为我们提供的ModalController来实现的。具体实现如下
默认页面
业务层如下:
控制层关键代码如下:
总结:
虽然功能需求比较简单,但是基本上涵盖了移动应用用户选择数据的基本场景。目前还在完善中,如果以上有哪些地方写的不好,或者需要完善的,可以和我联系:qq:771534408
网友评论