Detailed explanation of custom swiper component in JavaScript

Effect display
Component Settings

Step 1
Step 2
Step 3

Using Components

Step 1
Step 2
Step 3

Summarize

Effect display

insert image description here

Component Settings

Step 1

In the pages directory, create a new folder components

Step 2

Create a new folder swiper under components

In the swiper directory, create 4 new files, namely

swiper.
jsswiper.
jsonswiper.wxml
swiper.wxss

The location diagram of each file is as follows:

insert image description here

Note: At this time, the compilation will report an error. The error is displayed in json. Don't worry about it. Copy and paste the code later and compile it.

Step 3

Copy the following code into the four files in the swiper directory respectively

swiper.js

insert image description here

swiper.json

insert image description here

swiper.wxml

insert image description here

swiper.wxss

insert image description here

Using Components

Step 1

Introduce the component in the json file of the page where the swiper component is needed

{
  "usingComponents": {
    "custom-swiper": "../components/swiper/swiper"
  }
}

Note: …/components/swiper/swiper indicates the position of the component. You can replace it according to the position relationship you actually set.

Step 2

In the wxml page of the page, use the component code

<custom-swiper imgUrls="{{carouselImgUrls}}" />

carouselImgUrls

Type: Array Purpose: Used to store the address of the slideshow image (network address or local address)

Step 3

In the data of the js file of the page, add the carouselImgUrls variable

  data: {
    carouselImgUrls: [
    /*
    The number of pictures is customized. Picture source: Weibo Author: Girl Rabbit iiilass  
 	Infringement and deletion */
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv69f6j20j60j60ui.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvage4j20j60j6tah.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvadfnj20j60j60uk.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvdcswj20j60j6jt6.jpg",
      "https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv6kmbj20j60j6dhg.jpg"
    ],
  },

Finally, you only need to compile the code to get the effect diagram

insert image description here

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!

You may also be interested in:

Detailed explanation of the difference between arrow functions and normal functions in JavaScript
Implementing carousel effects with JavaScript
javascript to switch pictures by clicking a button
Summary of various methods for JavaScript to determine whether it is an array
JavaScript to achieve fireworks effects (object-oriented)
JavaScript Canvas implements Tic-Tac-Toe game
Detailed discussion of the differences between loops in JavaScript
Summary of several common ways to abbreviate javascript code
13 JavaScript one-liners that will make you look like an expert

<<: Tutorial on how to connect and use MySQL 8.0 in IDEA's Maven project

>>: Detailed explanation of the perfect solution to the VMware black screen problem after MacOS catalina upgrade