業務需求: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 滾動條的位置~