Alphabet scroll and fast scroll


#1

Hi,

Does anyone know how to implement iOS’s vertical alphabet scroll or Android’s fast scroll?

I’m working with a list of about 1,500 elements, so infinite scroll is great, but indexed jumping points will be crucial.

Thanks,
Ryan


#2

I’m interested in such a feature, too.


#3

Same for me, I’ll use a feature like this


#4

I’m not very sure, particularly what you want… But as per my guess try the following link… this might help you.

Check for contacts.ts page at the end of this article where Alphabetical List is implemented…

https://www.joshmorony.com/an-introduction-to-lists-in-ionic-2/


#5

Hi @vaibhav_bista,

This is what an Alphabet Scroll is: Stack Overflow

Notice the vertical alphabet on the right side of the screen.

The article you referenced uses alphabetic dividers … different topics.


#6

Ohh… sory… I only considered as Alphabet scroll :sweat_smile: and posted divider scroll with alphabet… Thanks for pointing me in the right direction…:sweat_smile:

that’s why I said in earlier reply I didn’t get your point what I exactly you want…

Let us know if you find any helpful article or you find any solution on Vertical Alphabet Scroll like Native Android…


#7

Hi everyone

Fast scroll is nothing but a div with letters positioned vertical. Every letter is <a> tag with href attribute which leads to particular segment of the page.

First of all, you need to have a list sorted and grouped alphabetically. This is managed by ionic item dividers and It is explained in this article at the bottom of the page: https://www.joshmorony.com/an-introduction-to-lists-in-ionic-2/

IMPORTANT: You need to have two dimensional array - array of groups (letters) and array of items inside every group.
Array of groups has to be an associative array where letters represent indexes. This is important because you will be setting item divider id attributes by these indexes, so you could jump on it when you click on <a> tag in your fast scroll component.

let myList = [ a: [{id: 1, title: 'item1'}, {id: 2, title: 'item2'}] b: [{id: 3, title: 'item1'}, {id: 4, title: 'item2'}] ]

Every item divider needs to have id attribute, which will be indexes of “myList” array. Fast scroll component will recieve a list of indexes (letters) to be rendered. You can render all letters from alphabet but I prefer only the ones you have inside your contact list.

Also you’ll need a special pipe to iterate through associative array in your template.

I created a gist file so you can take a look more closely: https://gist.github.com/anteburazer/3e45d6e9ad99e70835eb29becedb0a2d.
Some of the code is pseudo code so you’ll need to adjust it to your needs. Also my algorythams maybe are not the best so I provided a link above (for list sorting and grouping) or investigate a little bit.

I hope this help. If something is not clear let me know.


#8

May be that plugin could help you


#9

Do you think you can crate some tutorial? here’s what I’m trying to achieve: Ionic 3 Alpha Select


#10

Not working in ionic 4


#11

Is possible to have Alphabet scroll with lazy loading? If possible How to Do it and are there any disadvantages regarding it?