Vue encapsulates Swiper to realize image rotation

Image rotation is a function often needed in the front end. Recently learned Vue. Js, for Swiper encapsulation, to achieve a simple picture rotation component.

A, Swiper

Before implementing encapsulation, let’s take a look at Swiper.

• Swiper is a Javascript plugin designed for mobile devices such as mobile phones and tablets.

• Swiper can switch between focus images, tabs and multiple images on the screen.

• Swiper is open source, free, stable, easy to use and powerful. It is an important choice for building mobile websites.

Swiper can be used in a wide range of scenarios. The following example is a typical Swiper application scenario.

Swiper Chinese website

Two, Vue components

Vue components are designed to work together to improve maintainability and reuse. And picture rotation is suitable for the use of components to complete, so before introducing the specific implementation, first introduce about Vue components and component communication.

One of the most common Vue components is the parent-child component relationship: Component A uses component B in its template.

Of course, they need to communicate with each other: a parent component might want to send data to a child component, which might want to inform the parent about what’s happening inside it. However, it is also important to decouple parent and child components as much as possible through a well-defined interface. This ensures that the code for each component can be written and understood in relative isolation, improving its maintainability and reusability.

In Vue, the parent-child component relationship can be summarized as prop passing down and events passing up. The parent sends data to the child through prop, and the child sends messages to the parent through events.

Three, encapsulation implementation

1. Introduce the Swiper

First, you need to install Swiper.

npm install --save swiper
Copy the code

Then, two files are referenced.

import Swiper from "swiper";
import "swiper/dist/css/swiper.min.css";
Copy the code

2. The HTML code

Sets the HTML layout of the rotation diagram in the template.

<template>
  <div class="swiper-container" :class="swipeid">
      <div class="swiper-wrapper"> <! --> <slot name ="swiper-con"></slot> </div> <! -- pager --> <div :class="{'swiper-pagination':pagination}"></div>
  </div>
</template>
Copy the code

The named slot is used to improve decoupling, so that when the parent component is used, different rotation content can be set according to different situations.

You also need to set up pagers, which are page indicators in image rotation, such as small dots, or number indicators.

3. Initialize Swiper

Since Swiper is encapsulated to implement the rotation map, and has been installed previously, so now you need to initialize the use.

Prior to initialization, property information needed by the multicast component is determined based on Swiper usage and passed to the encapsulated Swiper component through the parent component.

And that’s when you need props.

props: {
    swipeid: {
      type: String,
      default: ""
    },
    effect: {
      type: String,
      default: "slide"
    },
    loop: {
      type: Boolean,
      default: false
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    pagination: {
      type: Boolean,
      default: true
    },
    paginationType: {
      type: String,
      default: "bullets"
    },
    autoPlay: {
      type: Number,
      default: 3000
    }
  }
Copy the code

The meanings of each attribute are explained below.

Now that you know what each of the above properties means, you can initialize Swiper and set specific properties.

To initialize Swiper, you need to pass in two parameters.

• The class name of the multicast container
• An object that represents the detailed functionality of the picture rotation component

    var that = this;
    this.dom = new Swiper("."Swipeid, {// loop: that. Loop, // pagination: {el:".swiper-pagination",
        bulletClass : 'swiper-pagination-bullet'}, // paginationType: that. PaginationType, // autoPlay: that. Direction, // Effect: that. Effect, // Autoplay will not be disabled after swiper is operateddisableOnInteraction: false// Automatically initialize the Swiper Observer when modifying its own or child elements:true// Swiper observeParents is automatically initialized when swiper's parent element is modified:true
    });
  }
Copy the code

4. Customize the rotation effect

After the above steps, the castor is packaged. We can customize the effect of the wheel caster we want. The following takes Zhihu’S API as an example to realize picture rotation.

1. The HTML code

<m-swipe swipeid="swipe" ref="swiper" :autoPlay="3000" effect="slide">
      <div v-for="top in tops" :key="top.id" class="swiper-slide" slot="swiper-con" >
        <img :src="top.image">
        <h3>{{top.title}}</h3>
      </div>
</m-swipe>
Copy the code

The first step is to reference the registered component, which is not detailed here.

M-swipe is the image rotation component implemented earlier, and its child components are the rotation content inserted through named slots.

2. The CSS code

.swiper-container {
    width: 100%;
  }
  .swiper-slide {
    height: 8rem;
    overflow: hidden;
    position: relative;
  }
.swiper-slide {
  div {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.4;
    position: absolute;
    background-color: @blue;
  }
  img {
    top: 50%;
    position: relative;
    transform: translate(0, -50%);
  }
  h3 {
    width: 70%;
    color: #fff;margin: 0; The font - size: 0.5 rem; line-height: 1rem; right: 5%; Bottom: 2.6 rem; text-align: right; position: absolute; Text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); &:before { content:"";
      width: 3rem;
      bottom: -0.6rem;
      right: 0;
      display: block;
      position: absolute;
      border: 2px solid @yellow;
    }
  }
}
.swiper-pagination-bullet-active {
  background: #fff;
}
.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 1rem;
    width: 95%;
    text-align: right;
  }
Copy the code

Swiper-pagination-bullet-active represents the class name of the dot currently indicated in the pager. Swiper-pagination-bullets indicates the class name of the pagination page. For details, see the class name of the element in the pagination page.

About the network request data display code is not posted, the source code address below.

Effect of 3.

This is just a simple encapsulation effect. For more effects, you can do it with more features provided in Swiper.

Github address: photo rotation