This is the 8th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Base component Last item: Backtop

Back to the top of the wild

When it comes to basic interaction in front-end development, one of the essential features is back to the top,

But Backtop back to the top function should also be one of the most insignificant features of the page, this sentence is not controversial.

I have seen in one of the few development experience of several different models of back to the top, such as instant return to the top, and roll back to the top of the roof, is one of the more common timing return to the top this several, notably the instantaneous back, go back to the two ways are the most common, the timing back to the top is relatively less, implementation is somewhat complex, income also is not big, also is the legendary pay is greater than the returns.

Of course, this is all personal, but in regular Web projects, going back to the top is probably essential, especially for long page projects.

The base component section ends with this component, and the next category of component sharing begins.

Draw the bones before you draw the tiger.

Let’s start with the structure. It’s easy to go back to the structure at the top. It’s just a regular layout.

<template lang="pug"> block content div( class="yx-backTop" :style="{right: `${right}px`, bottom: '${bottom}px'}" @click="toTop" v-show="backTop" slot div.yx-backTop-content <yx-icons type="backTop" /> </template>Copy the code

The structure is simple. If the value is passed, the style is displayed, otherwise a simple icon is displayed, and the default style can be customized.

The logical part

In the structure section, it is clear what passes are accepted, so here is just the core, the method of timing back to the top.

I didn’t write this method myself, originally I just wanted to use the regular scroll back to the top, but on reflection, this component would not be any better. So after a lot of research and a lot of back-and-forth, I finally found a similar method in other component libraries, so it’s just a simple analysis here.

The following code

onMounted(() = > {
  window.addEventListener('scroll', handleScroll, false)
  window.addEventListener('resize', handleScroll, false)
})

onBeforeUnmount(() = > {
  window.removeEventListener('scroll', handleScroll, false)
  window.removeEventListener('resize', handleScroll, false)})const handleScroll = () = > {
  backTop.value = window.pageYOffset >= props.showHeight;
}
const toTop = () = > {
  const sTop = document.documentElement.scrollTop || document.body.scrollTop;
  scrollTop(window, sTop, 0, props.duration);
  emits('click');
}

const scrollTop = (el, from = 0, to, duration = 500, endCallback) = > {
  if (!window.requestAnimationFrame) {
    window.requestAnimationFrame = (
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
          return window.setTimeout(callback, 1000/60); }); }const difference = Math.abs(from - to);
  const step = Math.ceil(difference / duration * 50);

  function scroll(start, end, step) {
    if (start === end) {
        endCallback && endCallback();
        return;
    }

    let d = (start + step > end) ? end : start + step;
    if (start > end) {
        d = (start - step < end) ? end : start - step;
    }

    if (el === window) {
        window.scrollTo(d, d);
    } else {
        el.scrollTop = d;
    }
    window.requestAnimationFrame(() = > scroll(d, end, step));
  }
  scroll(from, to, step);
}
Copy the code

Core method is the window here. RequestAnimationFrame, just recently thought the nuggets who wrote related articles # a magical requestAnimationFrame API; the front end of the animation

In short, the requestAnimationFrame is a function that is executed repeatedly, drawing the screen all the time, and all it has to do is figure out how far to scroll and how far to scroll each time it’s executed.

Const step = math.ceil (difference/duration * 50) const step = math.ceil (difference/duration * 50); All that’s left is to refine the function.

So that’s all the core function has to do.

Other styles and structures are very personal things, so I don’t want to emphasize my approach too much.

The last

By the end of this article, I have written most of the basic components of the component library, and I think that the basic content is covered in this article and can satisfy any other type of component development (including what I haven’t written).

From here on out, it’s time to move on to the next big category of component sharing. Stay tuned.

Finally, here is the list of basic components:

The Button Button

Mask Mask

Icon Icon

Link