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

HTML tutorial, easy to learn HTML language (2)

*******************Introduction to HTML language (...

React Hooks Usage Examples

Table of contents A simple component example More...

vue.js Router nested routes

Preface: Sometimes in a route, the main part is t...

Basic knowledge points of mysql worm replication

Worms replicate, as the name implies, by themselv...

Write a simple calculator using JavaScript

The effect is as follows:Reference Program: <!...

Implementing a simple age calculator based on HTML+JS

Table of contents Preface Demonstration effect HT...

MySQL Series 10 MySQL Transaction Isolation to Implement Concurrency Control

Table of contents 1. Concurrent access control 2....

JavaScript method to detect the type of file

Table of contents 1. How to view the binary data ...

Introduction to new ECMAscript object features

Table of contents 1. Object properties 1.1 Attrib...

How to migrate the data directory in mysql8.0.20

The default storage directory of mysql is /var/li...

Summary of 4 ways to add users to groups in Linux

Preface Linux groups are organizational units use...

Analysis of Hyper-V installation CentOS 8 problem

CentOS 8 has been released for a long time. As so...

The front-end must know how to lazy load images (three methods)

Table of contents 1. What is lazy loading? 2. Imp...

Detailed tutorial on uploading and configuring jdk and tomcat on linux

Preparation 1. Start the virtual machine 2. git t...