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

前言

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

需求:效果图如下


场景描述:

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

时间选择器:

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

模板代码:

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

底部弹出选择器:

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

普通选择器:

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

模板页如下:

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

特殊选择器:

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

默认页面

业务层如下:

控制层关键代码如下:

总结:

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 136,383评论 19 139
  • 在天气预报中,不同强度的降雪主要以降雪量来衡量,一般有小雪、中雪、大雪、暴雪四个级别: 小雪:12小时内降雪量小于...
    献礼1127阅读 925评论 0 0
  • 我想写个跟“目标”有关系的内容,整理一下自己对目标的理解。突然就想到了那个小目标“一个亿”。 “很多年轻人,有自己...
    刘冰杰阅读 516评论 0 3
  • 每一年的毕业季,就业问题成为了大家关心和讨论的话题。11月并不是一个就业的热季,除了11月底的国考,应该很少有国家...
    冰释主人阅读 718评论 1 1
  • 不算新颖 但是还是会记得 time waits for no one
    丸子2017阅读 209评论 1 0

友情链接更多精彩内容