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 滾動條的位置~

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章