[ionic] 停止滾動(scroll)功能

ionic 的 scroll 功能,可以先參閱下列 2 個 API 文件的說明。這 2 個 directive 的都會使用 Delegate $ionicScrollDelegate

Content

Scroll

這邊依據不同的狀況有不同的解決方案,但結果都是停止 scroll 的功能。

使用<ion-content>控制內容

依據 ionic API 說明文件,這邊有一組 API 可供參考使用。
  • scroll, {boolean}, Whether to allow scrolling of content. Defaults to true.
改成 false 之後可以停止 scroll 功能,不過經測試,如果要動態調整可能會有問題,但有別的處理方法,後面再提出解出方案。

使用<ion-scroll>控制內容

<ion-scroll> 可供選擇的變化比較多,除了停止或啟用之外,還有方向及起始位置的控制,如同這個 directive 當初設計的目的,就是專門為了 scroll 。

這邊主要是討論停止和啟用,所以其他部分就不多琢磨。

  • direction, {string}, Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.
將字串改成 '' 即可停止滾動,因為你把滾動的方向都取消了。

使用$ionicScrollDelegate

一般的使用狀況下,使用 $ionicScrollDelegate 下面幾組 API 便可完成停止滾動的需求。

freezeScroll([shouldFreeze])

  • shouldFreeze, {boolean}, Should this scroll view be prevented from scrolling or not.

freezeAllScrolls([shouldFreeze])

  • shouldFreeze, {boolean}, Should all app scrolls be prevented from scrolling or not.
當然凡事總有例外,今天就是遇到一個特殊狀況,發生使用 $ionicScrollDelegate 在 Android 6.0 可以正常運作,但之前的版本都會失效(ex: 5.1.1),這時只好用另外一種方式來解決問題。

混搭使用delegate-handle

在使用 <ion-content> 或 <ion-scroll> 時,設定 delegate-handle ,給予該 scrollView 識別方式。

如果將 delegate-handle 命名為 mainScroll ,那關閉 scroll 的用法如下
  • $ionicScrollDelegate.$getByHandle('mainScroll').getScrollView().options.scrollingY = true | false
這個舉例是將 Y 軸的滾動功能開啟或取消,同理也可以設定 X 軸。

簡而言之,透過這些 API 可以控制 scroll 的行為,如果真的遇到瓶頸可以試著使用 delegate-handle 強化控制的精準度。

留言

這個網誌中的熱門文章

執行 StrongLifts 5x5 三個月心得

第一次教召就上手

瓶頸