ionic-app经典ionic服务组件

最近一直在研究ionic的代码,特别是actionSheet和popup这些弹窗是如何实现的,如何整合成一个服务的形式的,方便在控制器中使用的(在这里就不多说原理了,几句话真的说不清,如果有兴趣的话,看看深入了解angualrj和ionic.bundle.js的代码)
下面将根据个人的理解,实现一个ionic服务---图片放大预览

实现功能:
a)双击图片放大预览功能,可以滑动轮播显示图片。           
b)双指捏放实现放大图片预览,双指捏放在图片的某一部位,特定对该部位进行放大显示。                
c)模板功能,在放大图片预览的下面可以修改指令中的缓存模板中的footer,可以自定义各种需要再实现的功能,比如在下面增加一个分享的模板或者评论模板。       

d)基于ionic的服务组件形式,图片的预加载功能,方便使用。

下面是一个demo:


下面还有一个内容轮播切换:


还有一个基于material design 的圆钮可以分布在屏幕的不同位置实现分享,回到顶部,弹出模态框等功能


多按钮弹出,可以用于分享功能



input输入框和微信一样可以自动根据输入换行和改变高度



下面是一个滑动内容框,向上滑动时,会将顶部的导航条隐藏点,再向下滑动时,顶导航条会滑动展示出来。



由于代码量比较多,而且设计到公司的代码,到时整理好之后将开源在github上。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值