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
*******************Introduction to HTML language (...
Table of contents A simple component example More...
Preface: Sometimes in a route, the main part is t...
Worms replicate, as the name implies, by themselv...
The effect is as follows:Reference Program: <!...
Table of contents Preface Demonstration effect HT...
Table of contents 1. Concurrent access control 2....
Table of contents 1. How to view the binary data ...
Table of contents 1. Object properties 1.1 Attrib...
The default storage directory of mysql is /var/li...
Preface Linux groups are organizational units use...
CentOS 8 has been released for a long time. As so...
Table of contents Deploy tomcat 1. Download and d...
Table of contents 1. What is lazy loading? 2. Imp...
Preparation 1. Start the virtual machine 2. git t...