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

Wheel wheel diagram

Why layout component?

My god, the author must have been out of his mind, the rotation diagram looks like a business component, he actually used it as a layout component, he must have been blind writing, shut off.

Well, don’t hurry, think about it from another point of view. Isn’t there a reason why an unknown author put it in the queue of layout components?

Carefully recall, 1202 today, front-end UI changes with each passing day, webpage module ever-changing, component library emerge in endlessly at the moment, this thing has long become an important information display module in most pages.

Don’t you know that even content communities like the Nuggets use rotation to showcase information, let alone most other sites?

Ok, blow almost, here is an AD, if someone contact, next time I will change the “nuggets” into the word specified by the golden leg.

Analyze a wave of common rotograph components

Here is not embarrassed to blow, a simple analysis of common round seeding are what looks like.

In view of the nugget sign-in page of the rotation chart does not have the market universality, so we will not talk about him, and find a more representative rotation analysis.

So here’s the Nugget Creators Center, which is a good place to do a little analysis and refine some of the other common features.

Here in the Creators Center, you can see the two main features of the rotation, auto scroll and click the point below to jump to the specified rotation page.

When the mouse hover will stop scrolling, not recorded, hee hee hee.

There are fewer buttons on the left and right sides compared to the usual round diagrams.

In addition, the nuggets side of the rotation does not support drag like side scrolling. You can also decide whether to add this or not.

Let’s go.

The main functions of the rotation diagram are listed as follows:

1. Automatic scrolling

2. Click below to jump

3, the mouse stops scrolling

4. Control buttons on both sides

5. Drag and roll.

Once you’ve decided what you want to do, you can go to the lovely editor and start ploughing and planting happily.

Bedding the structure first.

Let’s start with the simple ones. The parent structure is responsible for the main framework and the main logical parts of the logic, and the playsheet is a simple container, so let’s start with the playsheet.

Simply write a slot and let the developer fill it in. Be nice and just add the animation component transition.

block content
transition(
  :name="inName"
  mode="out-in"
)
  div(
    class="yx-carousel-item"
    v-show="isShow"
  )
    slot
Copy the code

What about the parent structure?

First throw out the logical part, and then look at the nuggets of this round, the parent will bear the control point, content size and so on a few blocks, but in fact are relatively simple part. If you want to do the usual round play then add the control button part.

block content div( class="yx-carousel" :style="`width: ${width}; height: ${height} '" @mouseover="mouseover" @mouseleave="mouseleave") ${height}' "@mouseover=" mouseleave") @click="setCarousel(-1, 'slide-left')" ) yx-icons.yx-icon-chevron-left(type="arrow-left") div( class="yx-carousel-right" @click="setCarousel(1, 'slide-right')") yx-icons.yx-icon-chevron-right(type="arrow-right") // div. Yx - Carousel -warp slot // control point div.yx-carousel-dot i( v-for="(item, i) in items" :key="i" :class="{active: inActive === i}" @click="handerDot(i)" )Copy the code

The style part includes the structure of this part, everyone can play freely, and there is no fixed routine.

The logical part

The logical part of this piece is relatively simple.

Start from the animation control, through the timer control scrolling effect, the mouse over the clear timer, otherwise restart timely.

let time = null;
const timeStop = () = > {
  if(time){
    clearInterval(time);
    time = null; }}const timeStar = () = > {
  if(autoplay && autoplay.value && ! time){ time =setInterval(() = > {
      setCarousel(1.'slide-right'); //
    }, interval.value * 1000)}}const mouseover = () = > {
  timeStop()
}
const mouseleave = () = > {
  timeStar()
}
Copy the code

In the scroll above, there is a function to set the rotation page, here to improve it.

const setCarousel = (i, name) = > {
  inActive.value += i;
  transitionName.value = name;

  if(inActive.value < 0){
    inActive.value = items.length - 1;
  }

  if(inActive.value >= items.length){
    inActive.value = 0}}Copy the code

Once you have a function to control the rotund page, the control point event is simple.

const handerDot = i= > {
  const now = i - inActive.value;
  setCarousel(now, now < 0 ? 'slide-left' : 'slide-right')}Copy the code

The last

The logic of the rosette component is also a relatively simple one, and there are many places where it can be played freely, and the development can be adjusted according to the actual business needs.

In addition, in common round casting, there will be situations where the control points are in and out of the graph. Here we can give it several parameters to control.

If it’s your own project, you can be more flexible, if it’s a business requirement, you can follow the business requirement. There’s a lot of emphasis on consistency within a project.