IONIC beta.14 版本变更一览

时间：2022-08-20 00:25:35

由网友（58758323）提供

重构

视图缓存

  1. 之前用户一旦在应用程序中执行导航动作,每个退出的视图元素和scope都会被销毁.如果相同的视图再次被访问,应用程序会重新生成元素.现在,视图可以被缓存以提高性能.
  2. 现在,当一个视图退出之后,元素将被遗留在DOM中,它的scope在这段时间内会被断开.当导航至一个已经被缓存的视图中,它的scope会被重新链接,并且其遗留在DOM中的元素会被重新激活到当前视图.
  3. 此举亦可保留之前视图的滚动位置.
  4. 可通过配置变量禁用缓存,IE设置为0,或者改变视图缓存数量上限.
  5. 个别的ionView可以通过设置cache-view=”false”属性,或者修改其$stateProvider.state配置来禁用缓存.
  6. 更多的文档说明参见 ionNavView docs

注意:拥有大量图片或者视频的视图不应该被缓存

导航(重做以提升性能)

  1. 减少DOM操作
  2. 缓存视图(参见楼上)
  3. 增加transition帧数以使动画更加平滑

Angular v1.3

  1. 升级Ionic支持Angular v1.3
  2. 通常Ionic仅可在此升级上运行,但是实际上应用到这些变动的只是v1.3中动画使用promises,其在v1.2中使用的是callbacks.
  3. 更多信息参见 Angular 1.3 以及 ng 1.2 迁移至 1.3

功能

平台差异过渡效果(视图间切换会有不同平台的默认切换效果)

  1. 比如,iOS系统会将新视图由右侧进入运动到中间,而离开的视图则有中间运动到左侧移除.然而Android系统则会将退出中的(exiting?我不确定这个地方是不是我理解错了)视图由底至中的过渡,覆盖掉之前的视图(其仍然保持原位置).
  2. 平台过渡效果会遵循其默认行为,但是配置变量和个性化CSS可以让你轻松的重写这些行为.

ionNavTitle

使用导航标题指令设置个性化HTML到你的ionView模板的HEAD BAR标题.这可使每个视图可以拥有其被指定的个性化题目,譬如一个图片或者任何HTML,不再仅为文本.ionNavTitle docs

enable-menu-with-back-views

在许多移动应用中,侧滑菜单是在子级视图中被禁用掉的.enable-menu-with-back-views属性决定了在回退按钮显示时,侧滑菜单是否启用

  1. 当设置为false时,任何带有menuToggle指令的按钮/链接都会被隐藏,并且用户无法通过侧滑的方式打开其菜单.
  2. 当回到带有侧滑页的根级页面(没有可见的回退按钮的页面),菜单开关按钮会再次被显示,并且菜单再次被启用.
  3. 更多参见 ionSideMenus docs

menuClose

关闭一个当前开启的侧滑菜单.另外,menuClose指令现在会在一个菜单被关闭的过程中导致过渡动画直接完成. menuClose docs

ionNavBackButton

回退按钮图标和显示的文本会自动的遵从平台默认设置,譬如调整为平台回退图标.

  1. 欲练此功必先自宫,把 ionNavBackButton 指令设置为空, IE .
  2. 回退按钮依然可以像之前一样被完全定制,但是当其没有任何内容时,它知道应用平台的配置.
  3. 更多参见 ionNavBackButton docs

navBar 按钮首要/次要位置

现在side属性又有了两个值:primary(首要) secondary(次要),譬如 .

  1. 首要的按钮通常分布到header的左侧,次要的在右侧.
  2. 然而,它们精确的位置是有着平台特殊性.
  3. 例如,在iOS操作系统中,首要按钮在header的最左侧,次要按钮在header最右侧,标题则在两者中间居中.
  4. 但是到了Android系统,两组按钮都会在header的最右侧,而标题则在header最左侧
  5. 我们推荐使用primary secondary指令,这样按钮就会正确的处于平台用户最熟悉的位置.
  6. 为了保证按钮可以位于指定的精确位置,left right属性值依然可用.
  7. 更多参见 ionNavButtons docs

$ionicView 事件

现在视图可以缓存了,控制器就可以只加载一次了,于是乎就会改变你所期望的数据加载的方式.

  1. 视图的scope现在产生的新的事件:$ionicView.enter,$ionicView.leave,$ionicView.loaded.
  2. 这些事件包含了视图的数据,譬如标题和回退按钮是否应该显示,以及过渡数据,譬如过渡指定的类型和方向.
  3. 更多参见 ionView docs

重写过渡类型和方向

用户一旦在应用程序中切换导航,Ionic自动的会应用平台的过渡动画和用户导航的方向.这两者都可以通过如下方式被重写:配置变量,更改视图属性,修改stateProvider属性或者是修改引发过渡行为的按钮/链接的属性.

navDirection

设置视图过渡动画方向的属性. navDirection docs

navTransition

设置过渡动画的类型.想要禁用过渡动画需将其设置为 none . navTransition docs

$ionicConfigProvider

使用$ionicConfigProvider可以在你的应用程序配置阶段改变配置属性.$ionicConfig也可以在应用程序执行过程中设置/获取配置值. $ionicConfigProvider docs

破坏性改动

CSS动画

视图过渡效果的CSS被修改了.此举仅破坏了Ionic应用程序自定义了Ionic的动画CSS时的动画CSS.另外,所有的用不着的动画关键帧都被移除了.(省了20Kb! 不是KB)

$ionicPlatformDefaults

平台变量的配置不再使用$ionicPlatformDefaults常量,取而代之的是$ionicConfigProvider

navClear

avClear指令本来是用来做新的侧滑菜单enable-menu-with-back-views属性所做的那些事的,但是已经被肉体歼灭了.另外新的navTransition和navDirection指令更为有用和符合颗粒性.

scrollView.rememberScrollPosition

这个方法也因为缓存视图的出现而不再需要,被歼灭了.

弃用

ionView.title

ionView指令使用了title属性,但这样会导致在PC浏览器中显示tooltip.虽然title属性因为考虑到向后兼容依然可用,但是我们现在推荐使用view-title,譬如 .

ionNavView animation属性

由于不在被nav views使用,animation属性现在可以放心大胆的消灭掉了,取而代之的是$ionicConfig.

ionNavBar animation属性

由于不在被nav views使用,animation属性现在可以放心大胆的消灭掉了,取而代之的是$ionicConfig.

$ionicNavBarDelegate#changeTitle

想要设置标题现在使用title(value)(带一个参数).changeTitle()方法这个版本还可以凑合着用,会产生一个控制台警告信息.

$ionicNavBarDelegate#setTitle

想要设置标题现在使用title(value)(带一个参数).changeTitle()方法这个版本还可以凑合着用,会产生一个控制台警告信息.

$ionicNavBarDelegate#getTitle

想要获取标题设置,使用title()(没有参数).getTitle()方法这个版本依然可以凑合用,也会产生一个控制台警告信息

$ionicNavBarDelegate#back

back()方法已经由于$ionicHistory.goBack()的出现失去了价值,于是也被歼灭了.另外,$ionicGoBack()方法被添加到了rootScope. $ionicHistory docs

$ionicNavBarDelegate#getPreviousTitle

由$ionicHistory.backTitle()取代了getPreviousTitle()方法. $ionicHistory docs

$ionicViewService

在导航重构时,$ionicViewService被拆分为两部分,即$ionicViewSwitcher和$ionicHistory.$ionicHistory大体上还是$ionicViewService的那些东西,但是现在为了便于测试,两者的关注点被更好的分离开来. $ionicHistory docs

相关文章