Detailed explanation of custom swiper component in JavaScript

Effect display

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:

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

swiper.json

swiper.wxml

swiper.wxss

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

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!