First, let’s look at the renderings comparing ScrollView and SectionList

demand

The page contains the current location, hot cities, the national city list. National city list page with alphabetic classification, with alphabetic index on the right

And to do that, reasonably, all I can think of is how do I implement the list of cities? ScrollView, FlatList, SectionList.

Of course, after thinking about it, the first thing that came to mind was to use SectionList to complete the page, so the first version came out as a page completed by the SectionList component. However, there is a problem, because there are too many cities in the country, after SectionList renders the visual page, clicking the index on the right side to jump to the corresponding letter area does not have a good scrolling effect, and there will be a blank rendering problem.

However, when using the inside positioning function of Alipay APP, loading and jumping index are very smooth, I wonder how to achieve it. Definitely not using SectionList, after Google related information and tried to use ScrollView to do the second version, the final result is as smooth as alipay component version.

ScrollView version of the city list

First look at the page layout, the list of cities in the country to find their own data, the data format of their own processing again, is probably this format. The reason for this is that the data source for the first version of SectionList had to be in this format, with keys and data(it had to be that name)

City list JSON data image

The code for the page layout is shown below

Page layout code

Detailed reference code to go, then talk about the implementation of ideas

The development train of thought

  1. Get the alphabet header (index array)

We can get capital letters by traversing


_gotLettersArray() {

let LettersArray = []

for (let i = 0; i < cityDatas.length; i++) {

let element = cityDatas[i];

LettersArray.push(element.title)

}

return LettersArray

}

Copy the code
  1. Gets the height of each letter region

First define an empty array to hold the heights of each letter region, then initialize a variable whose value is the same as the heights of each city list, and finally iterate over the heights of each region and put them in, thus creating a complete array of heights


_gotTotalHeightArray() {

let totalArray = []

for (let i = 0; i < cityDatas.length; i++) {

let eachHeight = ROW_HEIGHT * (cityDatas[i].data.length + 1);

totalArray.push(eachHeight);

}

return totalArray

}

Copy the code
  1. Click on the right side of the letter automatically slide to the corresponding position

When we click on the right side of the letter to enter the click event, scrollTo() to jump the page to the height of the corresponding subscript.


scrollToList(item, index) {

let position = 0;

for (let i = 0; i < index; i++) {

position += totalHeight[i]

}

this.refs.ScrollView.scrollTo({y: position})

}

Copy the code

The last

This is the list of cities completed with ScrollView, relatively much simpler, and a better experience, more please refer to the code

Making the address