Application examples of WeChat applet virtual list

Preface

There are more than 4,000 popular stock lists, which need to be rendered on the page and updated in real time during trading. If interfaces and paging are used, the page will become more and more stuck when scrolling down dozens of pages and must be updated in real time. The final approach is to pass the data from ws at the beginning. We only need to pass the starting and ending subscripts, and we only generate a few tags on the page. Greatly reduces rendering pressure.

What is a virtual list?

It only refers to rendering the labels in the visible area, constantly switching the start and end subscripts to update the view when scrolling, and calculating the offset at the same time.

Demo effect

Preparation

• Calculate how many lists can be displayed on one screen.
• The height of the box.
• The starting position of the scroll.
• The end position of the scroll.
• The scroll offset.

Screen height & box height

In the applet we can use wx.createSelectorQuery to get the screen height and the box height.

getEleInfo(ele) {
    return new Promise( ( resolve, reject ) => {
        const query = wx.createSelectorQuery().in(this);
        query.select(ele).boundingClientRect();
        query.selectViewport().scrollOffset();
        query.exec( res => {
            resolve(res);
        })
    })
},

this.getEleInfo('.stock').then( res => {
    if (!res[0]) return;
    // Screen height this.screenHeight = res[1].scrollHeight;
    //Box height this.boxhigh = res[0].height;
})

Start & End & Offset

onPageScroll(e) {
    let { scrollTop } = e;
    this.start = Math.floor(scrollTop / this.boxhigh);
    this.end = this.start + this.visibleCount;
    this.offsetY = this.start * this.boxhigh; 
}

scrollTop can be understood as how many boxes have been scrolled from the top / the height of the box = the starting subscript

Start + How many boxes can be displayed in the visible area of ​​the page = End

Start * Box Height = Offset

computed: {
    visibleData() {
        return this.data.slice(this.start, Math.min(this.end, this.data.length))
    },
}

When start and end change, we will use slice(this.start, this.end) to change the data, so that the content of the label can be replaced in time.

optimization

When scrolling quickly, a blank area will appear at the bottom because the data has not been loaded yet. We can render three screens to ensure that the data is loaded in a timely manner when sliding.

prevCount() {
    return Math.min(this.start, this.visibleCount);
},
nextCount() {
    return Math.min(this.visibleCount, this.data.length - this.end);
},
visibleData() {
    let start = this.start - this.prevCount,
        end = this.end + this.nextCount;
    return this.data.slice(start, Math.min(end, this.data.length))
},

If you have calculated the front screen reserved offset, you need to modify it as follows: this.offsetY = this.start * this.boxhigh - this.boxhigh * this.prevCount

When sliding, start, end, and offsetY are constantly changing. Frequent calls to setData may cause the applet to exceed memory and crash. Here we throttle when sliding to dilute the execution frequency of setData.

    mounted() {
        this.deliquate = this.throttle(this.changeDeliquate, 130)
    },
    methods: {
        throttle(fn, time) {
            var previous = 0;
            return function(scrollTop) {
                let now = Date.now();
                if ( now - previous > time ) {
                    fn(scrollTop)
                    previous = now;
                }
            }
        },
        changeDeliquate(scrollTop) {
            this.start = Math.floor(scrollTop / this.boxhigh);
            this.end = this.start + this.visibleCount;
            this.offsetY = this.start * this.boxhigh; 
            console.log('Execute setData')
        }
    },
    onPageScroll(e) {
	let { scrollTop } = e;
        console.log('Scroll =================>>>>>>>')
        this.deliquate(scrollTop);
    }

As can be seen from the above figure, each scroll reduces the writing of setData by at least two times.

The demo written in the article is here, you can refer to it if you need it.

Summarize

This is the end of this article about the WeChat mini-program virtual list application. For more relevant mini-program virtual list content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!