业务需求:ionic分页加载的页面如从第5页第2条点击进入详情页面,再从详情页面返回至列表页,位置保持与之前进入时一致。
但是angular页面路由跳转会导致页面重载(滚动条位置会刷新到浏览器顶部)
所以!!
技术上的重点就是设置滚动条的位置!
好了,上述都基本是废话。
下面进入正题:
通过审查元素可知 ionic 页面滚动距离是由transform控制的。
- 要是直接获取页面滚动距离则会一直为0!
- 有的小伙伴又想了:直接用 jQuery的 attr(“style”) 去改变它的属性样式不就可以了吗,但是此时会有一个严重的bug,就是页面初始化的时候确实可以滚动到相应的位置,但是当你再次滚动页面的时候,页面会一下弹到浏览器顶部。
在网上查了查,说的五花八门也没有一个用的上的。
正题重点:!!!
$ionicScrollDelegate
该方法直接被 $ionicScrollDelegate 服务触发,来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。
为你的 ion-content 绑定一个标识 delegate-handle="small"
并调用 scrollTo(left, top, [shouldAnimate])
结合一起:
$ionicScrollDelegate.$getByHandle('small').scrollTo(0,1000);
一行代码即可改变 ionic 滚动条的位置~