Ionic realization of Imitation Address Book Click Sliding and $ionicscrolldelegate use analysis _jquery

Introduction

In Noah's wealth project, the use of the Address Book, if only a simple view, I personally think it may be too monotonous, so on the basis of the view, increased the click of sliding effect. The goal has two: 1. Good experience. 2. The amount of data in the Address book is large, we click a module at the same time, so that the module sliding to the top, the visual range will become larger.

Effect

Click on a module and the page starts to slide up until the module is on top of the page.
This is the place to click before we click on the operations Center:

After clicking, there will be a sliding animation to make this module slide to the top:

Realize

Get elements, dynamically generate IDs
As we click on an element, we need to let the program know where we clicked, which is specific to a div, not where our fingers clicked.
In the previous wiki, it was introduced that the data format returned by the interface is a one-dimensional array, which requires a traversal of the data at the same time as a multidimensional array, at which point we can ID each piece of data:

Bind ID in front page like this

<div ng-repeat= "x in Contacts_list" Id= ' {{x.id}} ' >

The scrolltop in jquery

In general, you will think of this method of using jquery,

The use method is:

$ (selector). scrolltop (offset)

This can be achieved by sliding, but found in the use of: click on the same module, different sliding position click the distance of the slide is not the same, and sliding to the top of the content can not slide back, which is seriously inconsistent with our needs.
And also studied some other plug-ins, can not achieve the effect we want, it is like such a powerful ionic framework, whether it will provide us with such a method?

$ionicScrollDelegate

Authorization Controls scrolling view (created by ion-centent and Ion-scroll directives).
This method is directly triggered by the $ionicscrolldelegate service to control all scrolling views. Use $getByHandle method to control a particular scrolling view.

There are a number of ways in which the resize () method will be used frequently in ng-if, plus

It provides a way to get the current scrolling height of the screen getpositionscroll ():

GetScrollPosition ()

• Return: The object scrolls to the position of the view with the properties:
o {value} left to the distance to which the user has scrolled (starting at 0).
o {value} top to the distance that the user has scrolled (starting at 0).

Here we only need to use the vertical height, so we use $ionicscrolldelegate. Getpositionscroll (). Top Gets the current scrolling height.

Scrollto and Scrollby

The two methods are similar to the relationship between an absolute path (Scrollto) and a relative position (Scrollby).

We get the current click of the module location using the following method:

document.getElementById (x.id). offsettop

Here we get the position of this div from the top, but each time we want to click on the module to slide to the top of the screen, rather than the entire content of the topmost, so here we use Scrollby better.

In this case, you only need to move the screen at the top to the click of the module, the method is:

var scroll = document.getElementById (x.id). offsettop-$ionicScrollDelegate. GetScrollPosition (). Top;

Then call Ionic's own Scrollby method in the clicked method:

$ionicScrollDelegate. Resize ();
$ionicScrollDelegate. Scrollby (0,scroll,true);

At this point, this feature has been implemented, I hope to help you.

The end of this article, ionic implementation of the Imitation Address Book click Sliding and $ionicscrolldelegate use analysis has been achieved, I hope to help.