preface
The code is followed by the demo address
In daily development, beyond the use of off-the-shelf plug-ins, there are many do-it-yourself issues. When a drop-down list reaches thousands or even tens of thousands of entries, the browser will already be severely stuttered. Take a look at the following example
As you can see, it took about 5 seconds to load the drop-down list with 2W simple test data (nothing else on the page). The occurrence of this kind of situation in the heart is really very complicated, this is not playing me?
solution
This is the same performance problem as tabular data, which is solved by using pagers to reduce the amount of data carried on pages. So how do you solve drop-down lists? Usually we load all the data in the drop down at once, and for the current problem, the idea is the same, using paging to solve the page performance problem. Again, the pager is clickable, and the drop-down list is not clickable, so the only way to do that is to listen for scroll events.
First outline:
- Monitor the scroll
- Load data backwards as you scroll down
- Load data forward when scrolling up
- Data goes in and data goes out
Show begins
1. Listen for scrolling
<el-select class="remoteSelect" v-scroll v-model="value">
<el-option :value="item.id" v-for="item in list" :key="item.id">{{item.name}}</el-option>
</el-select>
Copy the codeHere is the listening scroll based on the EL-Select implementation in Vue and Element-UI. Here is the use of custom instructions in the way of listening to scroll
// cache directory index.js file import Vue from'vue'
export default () => {
Vue.directive('scroll', {
bind(el, binding) {// Get the scrolling page DOMlet SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
SCROLL_DOM.addEventListener('scroll'.function () {
console.log('scrll')})}})}Copy the codeRegister it in main.js with the global method vue.use ()
import Directives from './directives'
Vue.use(Directives)
Copy the codeAt this time, the scroll page can see the control of the printed log, on behalf of monitoring has taken effect, then roll up the sleeves to do
2. Load data backwards when scrolling down
The first thing you have to do is figure out whether you’re scrolling up or scrolling down
- Records the last scroll position
- The current position is compared to the last scroll position
The global position is recorded through a public variable, and the current scrollPosition is obtained through the scrollTop method and recorded in the public variable scrollPosition
bind(el, binding) {// Get the scrolling page DOMlet SCROLL_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
let scrollPosition = 0
SCROLL_DOM.addEventListener('scroll'.function() {// Current scroll position minus last scroll position // iftrueIt means scroll up,falseScroll downletFlagToDirection = this.scrollTop - scrollPosition > 0 // Record the current scrolling position scrollPosition = this.scrollTop console.log(flagToDirection ?'Rolling direction: Down' : 'Rolling direction: Up')})}Copy the code
Now that we know the direction of scrolling, we will do the corresponding processing according to the direction of scrolling. Tell the component about the scrolling behavior
. Omitted // record current scrollPosition scrollPosition = this.scrollTop // tell component binding.value(flagToDirection)Copy the codeEvent accept In the V-scroll instruction v-scroll=”handleScroll”, in this method handleScroll handles the scrolling behavior. All you need to do next is request data for scrolling down in this event
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Fn: handleScroll * * Intro: rolling processing behavior * * @ params: paramtrue** @params: param isfalseOn behalf of the scroll up * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / handleScroll (param) {if(param) {// Request data for the next page this.list.push(... this.ajaxData(++this.pageIndex)) } },Copy the code
At this point, scroll loading is implemented. But the load is too frequent, if the fast scrolling will send multiple requests for background data at the same time, in some dense browser Ajax will be developed and queued, which is not ideal. So how do you control it? Instead, trigger handleScroll when the scroll position is a certain height from the bottom of the page, such as 100px from the bottom of the page
scrollHeightGet roll height- At 100px from the bottom
ScrollPosition = this.scrollTop const LIMIT_BOTTOM = 100 // record the position of the scrollPosition from the bottomletScrollBottom = this.scrollHeight - (this.scrollTop + this.clientheight) < LIMIT_BOTTOM // Trigger if the specified position is reachedif(scrollBottom) {// Tell the component binding.value(flagToDirection)}Copy the code
Through the change of data length, it can be known that the triggering events have been significantly harmonized. This effect is similar to the lazy loading of mobile phones, and the data will be continuously superimposed.
Tip: There is a bug that ajax is asynchronous, and if the Ajax request takes 1s to return data while rolling down, multiple request events will be triggered. How can this be avoided? The answer is to add a flag bit that is set to false before the request and true after the request. Determine the flag bit before each request. If false, the event is blocked.
The midfield
Let’s look at our outline again
- Monitor the scroll
- Load data backwards as you scroll down
- Load data forward when scrolling up
- Data goes in and data goes out
So far we have only done steps ① and ②. If you’ve met your needs, you can finish reading. If it helps you a little bit, give it a “like” before you leave.
This is just the basics, not the highlights. What about no performance pressure?
- Code address: Github
- Current version Demo: Demo
Let’s go home from work for dinner. Finish writing over the weekend
Gorgeous division
Just like the weekend, everything will happen. – the 2018-11-10 08:30
3. Load data forward when scrolling up
We know the scrolling behavior by judging the parameter param in handleScroll, but previously we only limited the timing of scrolling down, now we improve the timing of scrolling up. Again, use the trigger 100px from the top.
The handleScroll event is triggered whenever the current scroll position scrollTop is less than 100px
// If you scroll down and are only 100px away from the bottomif(flagToDirection && scrollBottom) {// Tell the component binding.value(flagToDirection)} // If the scroll is up and only 100px away from the topif(! flagToDirection && this.scrollTop < LIMIT_BOTTOM) { binding.value(flagToDirection) }Copy the codeScrolling up was already detected in the handleScroll event, and the timing was as expected.
4. Data in and data out
4. Data in and data out
What about no performance pressure? That’s the key point. Look at the picture at a glance (it is not easy to find this effect) :
- Scroll down (each click in the figure represents a trigger to scroll to load data)
list
Why don’t we see how to do that
How do I maintain the length of this array? It’s easy to say in and out, but it’s not easy to implement.
Suppose our current array container holds a maximum of four pages of data, 100 items per page. Use the pageLimit parameter to limit the length of the array we need to maintain, which is set to 4.
How do we know which page to load when scrolling down or up?
So we need a record table, pageMap, to record the page numbers, which correspond to the current data entity list. The correspondence is as follows.
PageLimit: 4 pageMap: [1, 2, 3, 4]'First page of data'.'Page 2 data'.'Data on Page 3'.'Data on Page 4']
Copy the codeEffect drawing (currently rolling is not scientific, the steps are correct, there is optimization of rolling behind) :
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Fn: handleScroll * * Intro: rolling processing behavior * * @ params: paramtrue** @params: param isfalseOn behalf of the scroll up * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / handleScroll (param) {if (param) {
if (this.pageMap.length >= this.pageLimit) {
// 当长度相等的时候， 绝对不能超出长度 则有进必有出
// 删除 pageMap 列表的第一个元素
this.pageMap.shift()
// 对应删除list中一页的数据量
this.list.splice(0, this.pageSize)
}
++this.pageIndex
this.pageMap.push(this.pageIndex)
// 请求下一页的数据
this.list.push(...this.ajaxData(this.pageIndex))
// 同步记录页码
} else{// Continue loading if you haven't reached the first page while scrolling up. Stop loading if it doesif(this.pagemap [0] > 1) {// Scroll up, This.pageindex = this.pagemap [0] - 1 = this.pagemap [0] - 1 = this.pagemap [0] - 1 = this.pagemap ( This.pagemap = [this.pagemap,... this.pagemap] // This.list = [...this.ajaxData(this.pageIndex),...this.list]}else return false}}Copy the codeI’ll stop here, it’s time for lunch again. 2018-11.10 12:01
Optimization of rolling
When the data reaches the specified length, the total amount of data will not change, so the overall scrolling height is also fixed, which means that although the data is in and out, the scrollTop will no longer affect the scrolling position. As shown in the dynamic diagram above, the effect will be rolled to the bottom. This is not the end of pagination, but the user thinks it is. This is a serious problem
Optimization method:
- Returns the current scroll position to the middle of the total scroll height after each load. At this point we need to scroll
domAnd the height of the middle position through custom instructionsv-scrollCast out and scroll to the middle position while adding data to the head or tail.
Throws the middle of the DOM and scroll
// The index.js file in the cache directory // if you scroll down and it is only 100px from the bottomif(flagToDirection && scrollBottom) {// Tell the component binding.value(flagToDirection, SCROLL_DOM, This.scrollheight / 2)} // If the scroll is up and only 100px from the topif(! flagToDirection && this.scrollTop < LIMIT_BOTTOM) { binding.value(flagToDirection, SCROLL_DOM, this.scrollHeight / 2) }Copy the codeWhen the pageMap (corresponding to the list length) reaches the pageLimit length, the DOM scroll position is reset when adding and deleting data in and out
/ * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * Fn: handleScroll * * Intro: rolling processing behavior * * @ params: paramtrueRepresents scrolling down asfalseScroll up ** @params: el scroll DOM ** @params: MiddlePosition scrolling list the middle position of * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * / handleScroll (param, el, middlePosition) {if (param) {
if(this.pageMap.length >= this.pageLimit) { .... Omit the code this.list.splice(0, this.pagesize) // roll back to the middle el.scrollTop = middlePosition}.... Omit code}else{// Continue loading if you haven't reached the first page while scrolling up. Stop loading if it doesif(this.pageMap[0] > 1) { .... This.list = [...this.ajaxData(this.pageIndex),...this.list] // Roll back to middle el.scrollTop = middlePosition}else return false}},Copy the code
Ah ah
Have to panic
The overall height
LIMIT_BOTTOM
const LIMIT_BOTTOM = 100
Conditions of comb
- Every time I go back to
1/2 scrollHeightThe location of the - The position of each data change is
(1 / pageLimit) * scrollHeightWhat I’m showing here is1/4 * scrollHeight - Set an unknown X as the critical point of the jump
- The tipping point is the position the user sees before jumping
1/2 scrollHeightIs the position of the user after the jump
X + (1/4 * scrollHeight) = (1/2 scrollHeight)
Const LIMIT_BOTTOM = this. ScrollHeight /4
Const LIMIT_BOTTOM = this.scrollheight / 4.2
conclusion
This is where the story ends. Give it a thumbs up
Create a repository on Github to upload code:
- Demo View: Demo
- Github code to view: Portal
- Vue custom directive implements input limits to positive integers
- Why encapsulate AJAX again?
- Copyright: this article was first published in nuggets, if you need to reprint, please indicate the source.
The best time to plant a tree was ten years ago, followed by now. It doesn’t matter who says it.