The drop-down list component uses iscrol JS to achieve the rolling effect of the pit encountered

One 、iScroll.js

iScroll It's a high performance , Less resources , Without relying on , Multiple platforms javascript Scrolling plug-ins ,PC End 、 Mobile terminals can be used , stay Vue、Nuxt And other engineering projects can also be used , Application scenarios are widely used . Please refer to file .

Two 、 Problems encountered

1、 Scene description

I was in Nuxt In the project , It encapsulates a drop-down box component for keyword remote search , After entering the keywords , Go to the background to search for relevant data , Only 5 Data , You need to scroll down to see other data , Then in order to avoid too much data , Limit the loading of ten pieces of data at a time , Load more data by clicking load more at the end of the list .

2、 Problem description and solution

The first pit ：

In the introduction of iScroll.js after , First of all, we need to declare a global IScroll object , stay Nuxt You need to use Window object , To declare IScroll Object is mounted to the global ：

//  Statement  IScroll  object   And mount it globally 
window.myScroll = new window.IScroll('#wrapper', {
    
	mouseWheel: true,
	scrollbars: true,
	startY: scrollY
})

In the beginning, I was in Beijing Life cycle mounted Stage life and mount the object , Found after running ,iScroll It doesn't work , The drop-down list cannot be scrolled , But through developer tools , Find out iScroll The relevant properties of have appeared in dom In the . After a series of checks , The discovery is due to , The data rendered by the drop-down list is obtained from the background , When we're in mounted Stage mount IScroll When the object , List data has not been obtained from background and rendered , The page doesn't exist yet dom Elements , therefore iScroll Cannot get the corresponding element , Unable to tell the true length of the list , IScroll Objects will not work , The scroll bar will not appear .

Solution ：

adopt this.$nextTick(), When the page is rendered , Then go to declare and mount IScroll object ：

async getSchoolList () {
    
      //  Show only... At a time 10 Article related data 
      const params = {
    
        pageIndex: this.pageIndex,
        pageSize: 10
      }
      //  Go to the background to get data 
      const res = await this.$axios.post('/api/', params)
      //  Wait until the page is rendered , Then declare and mount 
      this.$nextTick(() => {
    
        window.myScroll = new window.IScroll('#wrapper', {
    
          mouseWheel: true,
          scrollbars: true,
          startY: scrollY
        })
      })
    },

The second pit ：

After stepping on the pit in front , Very smoothly, I fell into the second pit , As I said before , In order to avoid too much data , The logarithm is paged , Only load... At a time 10 Data , And then there's the problem , First load 10 After data ,iScroll There is no problem with the generated scroll bar . But load again 10 When the data , The problem arises , Because the list at this time has 20 Bar data , List length becomes longer , The scroll bar should be smaller . The scroll bar variable is really small , But for the first time 10 The scroll bar generated when the data is displayed does not disappear , It's the heel 20 The scrollbars of data overlap ,30 strip 、40 The same is true of article , It's hard .

Solution ：

This already belongs to iScroll.js Its own defects , It is unrealistic to modify its underlying code , So I thought of a trick , Every time you re render , Hide the front roll strip ：

    async getSchoolList () {
    
      //  Show only... At a time 10 Article related data 
      const params = {
    
        pageIndex: this.pageIndex,
        pageSize: 10
      }
      const res = await this.$axios.post('/api/', params)
      
      //  When the data increases  iscroll  The original scroll bar still exists   So hide all the previous scrollbars 
      const n = document.querySelectorAll('.iScrollIndicator')
      n.forEach((item) => {
    
        item.style.display = 'none'
      })
      //  Wait until the page is rendered , Then declare and mount   Generate a new scroll bar 
      this.$nextTick(() => {
    
        window.myScroll = new window.IScroll('#wrapper', {
    
          mouseWheel: true,
          scrollbars: true,
          startY: scrollY
        })
      })
    },