ionic2/ionic3 弹框Alerts、滑动框Slides 用法小结

更多请移步：https://juejin.im/post/6847902222072676360

 一、弹框Alerts

在实际工作中，我们经常需要弹框功能做界面交互，提升用户体验。如果用jq写， 一是所谓的“太low”，代码量也多；二是有些框架并不认jq，要使用还需要导入jq库很麻烦，为了一个小弹框就引入jq库也会造成项目代码体积过大。

其实现在的各大主流框架都是设备齐全的，多仔细看官网，这种小case很快就搞定，而且样式统一，有利于形成一致风格，更重要的是事半功倍，省时省力。

1、ionic官网的弹框有五种类型（ http://ionicframework.com/docs/components/#alerts）

      我发现这个英文官网是最新、最全的。

     
这五种类型的使用方法官网写得很详细，而且旁边还有个手机实时展示UI效果，直接复制粘贴代码，然后按照自己的需要修改变量，对比官网的效果，大多数时候就能完成自己的需求了。

无非就是import-->声明（依赖处理）-->粘贴方法进来-->在需要触发的地方调用这个方法。

我在这里要说的是，点了弹框的ok/cancel之后，页面要展示什么内容？要跳转去何方？如果你只是复制粘贴官网的代码，那么无论你点ok还是cancel，页面都是一片黑灰，点什么都没反应的。

这个时候要处理很简单（但是个新人容易遇到的小坑，比如我），只需要注意这些代码中的 present()方法.

大家可以发现官网上， Basic Alerts的末尾是调用 alert . present (); Prompt Alerts是 prompt.present();以此类推往下看，我就不贴出来了。

这个 present() 表示这个alert已经走到最后一步了，我们可以就在这里这样做：

       
这里，这句代码表示点击Alert上的ok就显示键盘。这里我用的是基础的alert，它没有cancel键。如果你用的是有两个按钮的Alert，没关系，如法炮制，注意 present() 就行了 。

 我发现ionic官网上的各种 present() ，基本上都是该组件的最后一步（也可能有例外）待读者们给指正，谢谢~

二、滑动框Slides

1、官网的slides： http://ionicframework.com/docs/components/#slides

之前对自己的英文没有自信，没有去看这个英文官网，百度搜左右滑动控件甚至还搜了手动轮播图，出来的结果五花八门，几乎每个都试了一下还达不到我想要的，浪费了很多宝贵的时间（希望看到这篇博文的读者，无论的用哪个框架，哪怕是一个个词翻译也要去看官方英文版，记住啦！）

2、slides是左右滑出现不一样的内容，类似手动轮播图；tabs是在tab菜单点击的时候高亮/小横杠跟随。

3、实现滑动框底下的小圆点-->只要设置pager属性这个小圆点就会出现，而且跟随你的左右滑动。

      

4、滑动块的大小、样式和位置，自己写CSS控制就行。

我的效果如下：

    

如有错漏请读者朋友们在评论区指出斧正，谢谢~

转载请@作者~

其他问题，也可以留言交流哦~