angular ionic 设置滚动条位置(从详情页返回列表页位置不变)

业务需求:ionic分页加载的页面如从第5页第2条点击进入详情页面,再从详情页面返回至列表页,位置保持与之前进入时一致。
但是angular页面路由跳转会导致页面重载(滚动条位置会刷新到浏览器顶部)

所以!!
技术上的重点就是设置滚动条的位置!
好了,上述都基本是废话。
下面进入正题:
scroll
通过审查元素可知 ionic 页面滚动距离是由transform控制的。

  1. 要是直接获取页面滚动距离则会一直为0!
  2. 有的小伙伴又想了:直接用 jQuery的 attr(“style”) 去改变它的属性样式不就可以了吗,但是此时会有一个严重的bug,就是页面初始化的时候确实可以滚动到相应的位置,但是当你再次滚动页面的时候,页面会一下弹到浏览器顶部。

在网上查了查,说的五花八门也没有一个用的上的。

正题重点:!!!
$ionicScrollDelegate

该方法直接被 $ionicScrollDelegate 服务触发,来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。
为你的 ion-content 绑定一个标识 delegate-handle="small"
并调用 scrollTo(left, top, [shouldAnimate])

结合一起:

$ionicScrollDelegate.$getByHandle('small').scrollTo(0,1000);

一行代码即可改变 ionic 滚动条的位置~

发布了26 篇原创文章 · 获赞 15 · 访问量 3万+

猜你喜欢

转载自blog.csdn.net/Shuanger112/article/details/88576330