Effect displayComponent SettingsStep 1In the pages directory, create a new folder components Step 2Create a new folder swiper under components In the swiper directory, create 4 new files, namely
The location diagram of each file is as follows:
Step 3Copy the following code into the four files in the swiper directory respectively swiper.js swiper.json swiper.wxml swiper.wxss Using ComponentsStep 1Introduce the component in the json file of the page where the swiper component is needed { "usingComponents": { "custom-swiper": "../components/swiper/swiper" } }
Step 2In 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 3In 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 SummarizeThis 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:
|
<<: Tutorial on how to connect and use MySQL 8.0 in IDEA's Maven project
Docker installation 1. Requirements: Linux kernel...
Version Chain In InnoDB engine tables, there are ...
This article records the detailed process of down...
Preface: This article is based on the experience ...
A situation that often occurs in a project is tha...
This article shares the specific code of Vue to i...
1. Check the PHP version after entering the termi...
In the previous article, we introduced the MySQL ...
IIS7 needs to confirm whether the "URL REWRI...
The new project has basically come to an end. It ...
This article shares the specific code of Element-...
Using the Docker run command docker run -d -p 920...
1. Introduction The main value that SELinux bring...
When you install MySQL, you will be given an init...
In the following example, when the width of the td...