Detailed explanation of custom swiper component in JavaScript

Detailed explanation of custom swiper component in JavaScript

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

Recommend

Summary of common docker commands

Docker installation 1. Requirements: Linux kernel...

A Brief Analysis of MySQL - MVCC

Version Chain In InnoDB engine tables, there are ...

Detailed tutorial on installing CUDA9.0 on Ubuntu16.04

Preface: This article is based on the experience ...

Vue implements the countdown component for second kills

This article shares the specific code of Vue to i...

A brief analysis of how to upgrade PHP 5.4 to 5.6 in CentOS 7

1. Check the PHP version after entering the termi...

Code analysis of user variables in mysql query statements

In the previous article, we introduced the MySQL ...

IIS7 IIS8 http automatically jumps to HTTPS (port 80 jumps to port 443)

IIS7 needs to confirm whether the "URL REWRI...

Detailed explanation of html download function

The new project has basically come to an end. It ...

Vue Element-ui table realizes tree structure table

This article shares the specific code of Element-...

Solve the problem of Docker starting Elasticsearch7.x and reporting an error

Using the Docker run command docker run -d -p 920...

Detailed explanation of SELINUX working principle

1. Introduction The main value that SELinux bring...

td width problem when td cells are merged

In the following example, when the width of the td...