美文网首页ionic3讨论ionic3.0开发
SRM移动组件之选择器-基于ionic3框架开发的选择器组件

SRM移动组件之选择器-基于ionic3框架开发的选择器组件

作者: 薪火设计 | 来源:发表于2017-08-20 17:06 被阅读140次

    前言

    最近诸多事务缠身,没有太多的时间闲下心来写写文档,好不容易挤出点时间,写一下关于我这段时间,写的一个小demo功能,虽然功能比较简单。基本上是参考ionic3官网的文档,如果有哪里不对或者需要修改的地方,欢迎指教,本人虚心接受。

    需求:效果图如下


    场景描述:

         在一些常见的移动应用中经常遇到一些,让用户进行帅选的数据,这些用户场景比较常见。为此我实现了一下一下常见的选择器:1,时间选择器,2,底部弹出选择器(适用于少量数据场景),3,普通选择器(适用于选择的数据量不大的场景),3,特殊选择器(适用于选择的数据量比较大的场景)

    时间选择器:

      主要借助于ionic3框架里面的一个ion-datetime组件实现的具体实现如下:

    模板代码:

    在视图控制层定义并初始化一个myDate的成员变量。

    底部弹出选择器:

      主要借助ionic3为我们提供的ActionSheetController组件具体实现看如下代码:定义一个presentActionSheet成员方法,在模板也触发该事件即可。

    普通选择器:

    普通选择器适用于数据量一般的场景下,实现原理主要借助主ionic3组件之ion-select的基础之上进行开发出属于自己的组件。

    模板页如下:

    控制层定义一个数据源如下:

    特殊选择器:

    特殊选择器主要适用于数据量比较多的场景下,并且带有搜索功能,检索出用户想要的结果,实现特殊选项器主要是借助于ionic3 为我们提供的ModalController来实现的。具体实现如下

    默认页面

    业务层如下:

    控制层关键代码如下:

    总结:

    虽然功能需求比较简单,但是基本上涵盖了移动应用用户选择数据的基本场景。目前还在完善中,如果以上有哪些地方写的不好,或者需要完善的,可以和我联系:qq:771534408

    相关文章

      网友评论

        本文标题:SRM移动组件之选择器-基于ionic3框架开发的选择器组件

        本文链接:https://www.haomeiwen.com/subject/icbfdxtx.html