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

Roll over to the bridge

From side to side

If the previous round diagram can still be included in the layout component because of its common, universal nature, then this one can also be considered a layout component?

Isn’t it more common sense to use it as a business component, either because of its ubiquity or because of its own functional limitations?

NO! NO! NO! As a developer, it’s natural to be creative and see things from a different perspective than anyone else.

I’m gonna make something up first.

The main reason for using it as a layout component rather than a business component is that it also essentially provides a common “platform” for content to be defined by the developer.

And the function part is also done to scroll to the bottom of the trigger time. Once the content is in the hands of the developer, parts of the component itself are more in line with the qualities of a layout component.

Understand applause!

At the end of the day, my understanding of layout components is to provide the platform and leave the content to development.

Business components are more likely to be secondary encapsulation of other components based on requirements, or to develop a component specifically.

To make things

Since it is only a platform, then do a good job of a platform to do it, from the beginning of the structure to do a good job of the platform.

block content div.yx-scroll( :style="{height: `${viewHeight}px`}" @mouseenter="mouseover" @mouseleave="mouseout" ) div.yx-scroll-content( :style="{paddingRight: `${size}px`}" @scroll="viewScroll" ) slot transition(name="fade") div.yx-scroll-bar( v-show="! alwaysVisible || isShow" :style="{width: `${size}px`}" @mousedown="thumbDrag($event)" ) div.yx-scroll-thumb( ref="thumb" :style="{height: `${barHeight}px`,top: `${barTop}px`,borderRadius: `${size}px` }" )Copy the code

The structure part is clear, mainly monitoring the scrolling event, and the scrolling back to the top and bottom is handed over to the logical part to judge.

In addition, the scrollbar in this component is custom, not default, but this is optional and can be used freely.

The logical part

As usual, pick the important points.

Let’s start with the scroll bar.

const thumbDrag = (e) = > {
  e.preventDefault()
  // Obtain information such as the node and scroll value respectively
  const el = ctx.vnode.el
  const view = el.children[0]
  const touchY = e.clientY - BarTop.value
  const element = e.target

// Calculate the scroll height and the height of the display scroll bar
  if (element.className === 'yx-scroll-bar') {
    const top = e.clientY - element.getBoundingClientRect().top
    view.scrollTop =
      view.scrollHeight * (top / element.offsetHeight) -
      element.offsetHeight / 2
  } else {
    const move = (ev) = > {
      isDrag = true
      const bt =
        (ev.clientY - touchY) /
        (view.offsetHeight - thumb.value.offsetHeight)
      const top = (view.scrollHeight - view.offsetHeight) * bt
      view.scrollTop = top
    }
    document.addEventListener('mousemove', move)
    document.addEventListener('mouseup'.() = > {
      isDrag = false
      if(! isArea) { isShow.value =false
      }
      document.removeEventListener('mousemove', move)
    })
  }
}
Copy the code

Event listeners

const emits = defineEmit(['onScroll'.'update:to']);

const viewScroll = () = > {
  const el = ctx.vnode.el;
  const view = el.children[0];
  const catchTop = view.scrollTop / (view.scrollHeight - view.offsetHeight);
  barTop.vuew = catchTop * (view.offsetHeight - thumb.value.offsetHeight);

  emits('onScroll', catchTop);
  emits('update:to', view.scrollTop);
}
Copy the code

Select * from catchTop; select * from catchTop; select * from catchTop; select * from catchTop; select * from catchTop;

other

The rest of the components are more flexible and can be adapted to suit your project’s needs or expectations.