Moment For Technology

Alphabetic index navigation - small procedures

Posted on Nov. 17, 2023, 7:33 a.m. by James Brown
Category: The front end Tag: Intelligent applets

Function implementation

1. The index follows the list

1.1 Implementation Roadmap

To implement the effect of index following list, we need to know the following two top:

  • When the page rendering is completed, the boundary coordinate of each letter title, that is, top value;
  • The vertical scrolling distance of the page, that is, scrollTop;

If the scrollTop value is between top1 and top2, then we can make the alphabetic index for top1 selected

1.2 Code Implementation

To get the position of the title after the page is rendered, we need to do this in the onReady hook function. We also need to use the API provided by the applet to createSelectorQuery to get the position of the title:

onReady() {// When the page is rendered, get the position of each letter title so that when scrolling, the letter index locates this.$mpUpdated(() = {// Applet view updated // this.brands alphabetical listif(this.brands.length ! ForEach ((item, I) = {this.brands. ForEach ((item, I) = {if(i ! = = 0) {let letter = `.${item.letterName}`;
                    let query = this.$api.createSelectorQuery().in(this); = { this.lettersArr.push({ name: item.letterName, top: Math.floor(res[0].top) }); }); }}); }}); }Copy the code

When a page is scrolling, we need to get the current scrolling distance of the page in real time, so that we can know where the page is now. This can be implemented in the onPageScroll hook function; After obtaining the position, we can compare it with the previous letter position information to know which letter position the page is currently in:

onPageScroll(e) {

    this.lettersArr.forEach((item, i) = {
        let currentTop =;
        let maxIndex = this.lettersArr.length - 1;
        let maxTop = i === maxIndex ? currentTop : this.lettersArr[i + 1].top;
        if(e.scrollTOP  currentTop  e.scrollTOP  maxTop) {// this.isSelect =; }}); }Copy the code

When the page hits the bottom, the last index is selected. This can be done in the onReachBottom hook function.

onReachBottom() {// listen for the bottom event and select this.isselect ='Z';
Copy the code

Now that our first requirement "index follows list" is complete, let's look at how to "click/drag the index on the right side, and the list automatically scrolls to the specified position".

2. Click/drag the index on the right to automatically scroll the list to the specified position

2.1 Letter click index

In short, calculate the position of a letter title relative to the document, and then use the apPLETS API: pageScrollTo implement scrolling on the line, so the first image:

As shown in the figure, when we determine the position to scroll to, that is, the position of t title, we just need to get the height of the document volume (scrollTop) and the coordinate of the title relative to the screen (TOP, can be negative). So we need to do two things first:

  • CreateSelectorQuery Retrieves the top value of the target location
  • To get the current scrollTop, this step is actually implemented in the onPageScroll hook function to complement the code
OnPageScroll (e) {// equivalent to scrollTop in order to calculate the height of the letter title relative to the document this.baseTop = e.sccrolltop; . }Copy the code

After getting the scrollTop, we can get the title of the target letter in the click event and get the position, so as to confirm the target position and achieve the index of the letter click:

HandleLetterClick (e) {handleLetterClick(e) {letletter = e.currentTarget.dataset.letter; // Set the right letter index to the selected style this.isSelect = letter; // The class name of each letter heading is named after the letter name, for example, the class name of A heading: A, by which the heading node can be selectedlet query = `.${letter}`; this.selectAndScrollTo(query); } // Get the position and scroll selectAndScrollTo(name) {letthat = this; // Call the createSelectorQuery API to get the locationlet query = that.$api.createSelectorQuery().in(that); (name).boundingClientRect().exec(res = {// baseTop set in onPageScroll, equivalent to scrollToplettargetTop = that.baseTop + res[0].top - that.titleHeight; // Call pageScrollTo that.$api.pageScrollTo({
            scrollTop: targetTop,
            duration: 0,
            success(res) {
                console.log('pageScrollTo success', res);
            fail(err) {
                console.log('pageScrollTo fail', err); }}); }); }Copy the code

2.2 Letter drag index

As with clicking on the index, we still need to know the position of the corresponding letter heading relative to the document for scrolling, but before we can do this we need to confirm which letter heading we are targeting.

To find out which alphanumeric index your finger slides to, just know how far your finger is from the top of the index list, and use this distance length as the height of each alphanumeric index to locate the letter exactly. So how do you know the length of this distance? Here's a picture:

Figure: To calculate the distance length, we can subtract the index list from the top of the screen by the current touch distance (clientY), so we need to listen for the TouchMove event (* bind the TouchMove event to the index list) :

// The touchMove event handleLetterMove(e) {// Gets the distance from the touch to the top of the screenlety = e.changedTouches[0].clientY; // Get the position from the top of the index list to the screenlettop = e.currentTarget.offsetTop; // Calculate the distance between contacts and the top of the list y = y-top; // Find the index of the letter of the contactletletterIndex = Math.floor(y / this.letterItemHeight); // Find the corresponding letter according to index and confirm the targetletletterName = this.brands[letterIndex].letterName; // Set the selected style this.isSelect = letterName;let query = `.${letterName}`; // Call selectAndScrollTo() this.selectAndScrollto (query); }Copy the code
About (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.