Implement List Section Index Titles With Scroll Effects Like iOS UITableView

ionic-v1
1

I know for iOS there is native way to implement Section Index Titles Scroll Effects like Apple Phone Contacts. The effects are marked in the following pics with colors. When scrolling, Header B will push Header A, and Header B then will fix at the top of the scroll view.

Anyone know how to implement it using IONIC ? I did find a similar ionic plugin, but the effects of ‘pushing header’ is different.

image
1 copy.png300×534 29.2 KB

2

I also have same issue.Please help me

3

you mean like this https://github.com/Poordeveloper/ion-sticky ???

4

Thanks for reply @anicacute09 ,its not like this

5

@hariomtech, we used ion-sticky as middle course

6

Thanks @juanduxian for reply…Can you please help me how to apply ion-sticky as i took data from DB in json format.

7

There is a nice implementation here https://codepen.io/mikelucid/pen/mqzLc
I tried it but the main problem is that each letter is a button.
When interacting with the browser, if you don’t release the button, you cannot press another one.
So you can’t expect to press button A, slide down to Z and have the list scrolls.
The ‘sliding’ behaviour of the iOS is not achievable with buttons I think.
On the other hand, the <input type=range can be used vertically to provide a similar press’n’slide feeling, but the cross-browser support for range labels (A-Z) is not very good. So you would have to add a vertical alphabet div beside the range-slider.
It would definitely be a nice item to have in Ionic as this has become a standard of interacting with large lists.