Shulou(Shulou.com)06/02 Report--

This article introduces the relevant knowledge of "what is the implementation of Python's concise and interesting infinite drop-down". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I wonder if you noticed anything from the picture above, such as only rendering part of the DOM of the visual area, and only the padding of the outer container is changing during scrolling?

The former point is easy to understand, and it is impossible to render all the list elements of a long list (or even an infinite drop-down list) because of performance, while the latter is one of the core of the solution introduced in this article!

To tell you in advance that there are two elements of the plan:

Intersection Observer

Padding

After explaining the elements, maybe you can try to start thinking and see if you can guess the specific implementation plan.

Scheme introduction

Intersection Observer

Basic concept

It has always been difficult to detect the visual state of an element or the relative visual state of two elements. Traditional solutions are not only complex, but also have high performance costs, such as listening for scrolling events, then querying DOM, getting element height, location, calculating distance window height, and so on.

This is the problem Intersection Observer is trying to solve. It provides developers with a convenient new way to asynchronously query the position of elements relative to other elements or windows, eliminating expensive DOM queries and style reading costs.

Compatibility

Mainly in Safari compatibility is poor, need 12.2 or more to be compatible, but fortunately, there is polyfill edible.

Some application scenarios

Lazy loading implementation when the page is scrolling.

Infinite drop-down (implementation of this article).

Monitor the exposure of some advertising elements to do relevant data statistics.

Monitor whether the user's scrolling behavior reaches the target location to implement some interactive logic (such as pausing playback when the video element scrolls to a hidden position).

Implementation of padding scheme

With a basic understanding of Intersection Observer, let's take a look at how to use Intersection Observer + padding to achieve an infinite drop-down.

Let's start with an overview of the general idea:

Monitor whether the first and last elements of a fixed-length list enter the window

Update the sequence number of the first element rendered in the current page

According to the above serial number, the target data element is obtained, and the list content is re-rendered to the corresponding content.

Container padding adjustment, simulated scrolling implementation.

Core: use the padding of the parent element to fill in more and more DOM elements that should be available with the infinite drop-down, leaving only a certain number of DOM elements above and below the window area for data rendering.

1. Monitor whether the first and last elements of a fixed-length list enter the window / / created by the viewer

This.observer = new IntersectionObserver (callback, options)

/ / observe the first and last elements of the list

This.observer.observe (this.firstItem)

This.observer.observe (this.lastItem)

Let's take the rendering of 20 fixed list elements on the page as an example. We observe the first element and the last element with Intersection Observer. When one of them re-enters the window, the callback function triggers:

Const callback = (entries) = > {

Entries.forEach ((entry) = > {

If (entry.target.id = firstItemId) {

/ / when the first element enters the window

} else if (entry.target.id = lastItemId) {

/ / when the last element enters the window

}

});

2. Update the sequence number (firstIndex) of the first element rendered on the current page

As an example, we use an array to maintain the data that needs to be rendered to the page. The length of the array grows as new data is requested, and a certain number of elements, such as 20, are always rendered. So:

1. The element in the array whose sequence number is 0-19 is rendered at first, that is, the corresponding firstIndex is 0 at this time.

2. When the element with sequence number 19 (that is, the lastItem in the previous step) enters the window, we will render 10 elements back, that is, the element with sequence number 10-29, then the firstIndex is 10

3. The next time, when the element with sequence number 29 enters the window, continue to render 10 elements back, that is, the element with sequence number 20-39, then the firstIndex is 20, and so on.

/ / We cached the original firstIndex

Const {currentIndex} = this.domDataCache

/ / take half of all the elements in all containers as the increment of each rendering

Const increment = Math.floor (this.listSize / 2)

Let firstIndex

If (isScrollDown) {

/ / increase the sequence number when scrolling down

FirstIndex = currentIndex + increment

} else {

/ / decrease in sequence number when scrolling up

FirstIndex = currentIndex-increment

}

In general, the purpose of updating firstIndex is to know which data should be fetched and rendered according to the scrolling of the page.

3. According to the above serial number, get the corresponding data elements, and render the list again as the new content const renderFunction = (firstIndex) = > {

/ / offset = firstIndex, limit = 10 = > getData

/ / getData Done = > new dataItems = > render DOM

}

This part is to query the data according to firstIndex, and then render the target data to the page.

4. Padding adjustment, simulated scrolling

Now that we have implemented the update of data and DOM elements, how can we achieve the effect of infinite drop-down and the experience of scrolling?

Imagine that, apart from everything, the most primitive, direct and rude way is for us to get 10 new data elements and then insert 10 new DOM elements into the page to render the data.

But at this time, compared with the rough scheme above, our solution is: for these 10 new data elements, we render the existing DOM elements and replace the invisible data elements that have left the window; while there should be more DOM elements to further open the height of the container, we use padding filling to simulate the implementation.

Scroll down

/ / increment of padding = height of each item x number of new data items

Const remPaddingsVal = itemHeight * (Math.floor (this.listSize / 2))

If (isScrollDown) {

/ / paddingTop is added to fill the top position

NewCurrentPaddingTop = currentPaddingTop + remPaddingsVal

If (currentPaddingBottom = 0) {

NewCurrentPaddingBottom = 0

} else {

/ / subtract if there is a paddingBottom, and there will be elements scrolling to the bottom to replace it.

NewCurrentPaddingBottom = currentPaddingBottom-remPaddingsVal

}

}

Scroll up

/ / increment of padding = height of each item x number of new data items

Const remPaddingsVal = itemHeight * (Math.floor (this.listSize / 2))

If (! isScrollDown) {

/ / paddingBottom is added, fill the bottom position

NewCurrentPaddingBottom = currentPaddingBottom + remPaddingsVal

If (currentPaddingTop = 0) {

NewCurrentPaddingTop = 0

} else {

/ / subtract if there is a paddingTop, and there will be elements scrolling to the top to replace it.

NewCurrentPaddingTop = currentPaddingTop-remPaddingsVal

}

}

Finally, there are padding setting updates and related cache data updates.

/ / Container padding reset

This.updateContainerPadding ({

NewCurrentPaddingBottom

NewCurrentPaddingTop

})

/ / DOM element related data cache update

This.updateDomDataCache ({

CurrentPaddingTop: newCurrentPaddingTop

CurrentPaddingBottom: newCurrentPaddingBottom

}); think about and summarize the solution summary:

Use Intersection Observer to monitor the scrolling position of related elements, listen asynchronously, reduce DOM operations as much as possible, trigger callbacks, then get new data to update page elements, and use adjustment container padding to replace more and more DOM elements, and finally achieve list scrolling and infinite drop-down.

Comparison of related schemes

Here is a basic comparison with the infinite drop-down solution implemented by the well-known library-iScroll. Let's first explain the implementation summary of iScroll infinite before:

IScroll acquires the scrolling distance by listening to traditional scrolling events, and then:

Set the translate of the parent element to move the overall content up (down)

Then, based on the scrolling distance, we can know that the corresponding sub-elements have been scrolled out of the window, and determine whether these sub-elements leaving the window should be moved to the end, and then set the translate to move to the end. This is like a circular queue, as the scroll progresses, the top element comes out of the window first, but moves to the end, thus achieving an infinite drop-down.

Related comparison:

To achieve comparison: one is Intersection Observer snooping to notify child elements to leave the window, as long as the parent element padding is set quantitatively; the other is to monitor traditional scrolling events, obtain the scrolling distance, and then do a series of calculations to set the translate of the parent element and child elements. Obviously, the former looks a little more concise and clear.

Performance comparison: I know when it comes to comparison, performance issues will come to mind all of a sudden. In fact, the key to performance comparison is Intersection Observer. Because only the padding setting or translate setting, the performance gap is very small, but personally feel that padding will be more concise? Intersection Observer actually removes all the relevant logic at the scrolling level, you no longer need to obtain the corresponding DOM attributes such as scrolling distance, and you no longer need to do a series of complex calculations related to scrolling distance, and synchronous scrolling events trigger asynchronously, and you no longer need to do anti-shake logic, which is improved in terms of performance.

Flaws:

The calculation of padding depends on the fixed height of the list item.

This is a synchronous rendering solution, that is, the current calculation adjustment of the container padding, which cannot calculate the data obtained asynchronously and is only related to the user's scrolling behavior. This seems to be at odds with the actual business scenario. The solution is as follows:

Idea 1. Use Skeleton Screen Loading to render data elements synchronously, which is not affected by data acquisition asynchronously. That is, when the data request is not completed, use some pictures to occupy the space, and then replace it after the content has been loaded.

Idea 2, scroll to the target location, block the setting of the container padding (that is, the occurrence of infinite drop-down) until the end of the data request, and prompt the user to load the status with loading gif, but this program is relatively complex, you need to fully consider the user's unpredictable scrolling behavior to set the container's padding.

This is the end of "what is the implementation of Python's concise and interesting infinite drop-down". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.