Ionic implements imitation Address Book Click Slide and $ ionicscrolldelegate Usage Analysis _ jquery

This article mainly introduces Ionic's implementation of imitation Address Book Click Slide and $ ionicscrolldelegate's usage analysis materials. For more information, see the following introduction.

In the Noah fortune project, the address book is used. If it is just a simple view, I personally think it may be too monotonous. Therefore, the Click Slide effect is added based on The View. There are two purposes: 1. Good experience. 2. The address book contains a large amount of data. When we click a module, the module slides to the top layer, and the visible range increases.

Effect

Click a module, and the page starts to slide up until the module is at the top of the page.
Here is the place before clicking. We click operation center:

After clicking, an animation slides the module to the top:

Implementation

Get element and dynamically generate id
While clicking an element, we need to let the program know where we clicked, instead of where we clicked.
As described in the previous wiki, the data format returned by the interface is a one-dimensional array. When converting to a multi-dimensional array, You need to traverse the data at the same time, at this time, we can add the id to each data entry:

Bind the id on the front-end page.

Scrolltop in Jquery

Generally, you will think of jquery's method,

The usage is as follows:

$(selector).scrollTop(offset)

In this way, slide can be implemented. However, when you click the same module, the distance between different sliding positions varies, in addition, the content that slides to the upper layer cannot be moved back, which is seriously inconsistent with our needs.
I have also studied some other plug-ins that cannot achieve the desired results. will such a powerful ionic framework provide us with such a method?

$ IonicScrollDelegate

Authorization Control scroll view (created using the ion-centent and ion-scroll commands ).
This method is directly triggered by the $ ionicScrollDelegate service to control all scrolling views. Use the $ getByHandle method to control specific scrolling views.

Here there are many methods. The resize () method is often used in ng-if. In addition

GetPositionScroll ():

GetScrollPosition ()

• Return: the position where the object scrolls to the view, with the following attributes:
O {value} left: the distance from the left to the user's scrolling (start with 0 ).
O {value} top: the scroll distance from the top to the user (start with 0 ).

Here we only need to use the vertical height, so use $ ionicScrollDelegate. getPositionScroll (). top to get the current scroll height.

ScrollTo and scrollBy

These two methods are similar to the relationship between the absolute path (scrollTo) and the relative position (scrollBy.

The following method is used to obtain the position of the currently clicked module:

Document. getElementById (x. id). offsetTop

Here we get the position p from the top, but each time we want to slide the module we click to the top of the screen, rather than the top of the entire content, so it is better to use scrollBy here.

In this case, you only need to move the distance from the top of the screen to the Click module. The method is as follows:

Var scroll = document. getElementById (x. id). offsetTop-$ ionicScrollDelegate. getScrollPosition (). top;

Then, call the scrollBy method that comes with ionic in the method you click:

$ IonicScrollDelegate. resize ();
$ IonicScrollDelegate. scrollBy (0, scroll, true );

So far, this function has been implemented, and we hope to help you.

This article ends with Ionic's implementation of imitation Address Book Click Slide and $ ionicscrolldelegate's usage analysis. I hope it will be helpful to you.