Carousel images are very common in applications. This article mainly shares with you the development examples of the WeChat applet carousel image function, hoping to help everyone.
Carousel chart: swiper slider view container.
1. Write the page structure
##pages/index/index. wxml
<!--index.wxml-->
<view>
<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" class="slide-image" width="355" height="150"/>
</navigator>
</swiper-item>
</block>
</swiper>
</view>Note: Do not add css settings in the view: display: flex; otherwise The effect cannot be displayed
2.Setting data
Understand Property before setting
#swiper-item can only be placed in the
component, and the width and height are automatically set to 100%. Set data in index.js
##//index.js
//获取应用实例
var app = getApp()
Page({
data: {
imgUrls: [ {
link:'/pages/index/index',
url:'../uploads/a01.jpg'
},{
link:'/pages/logs/logs',
url:'../uploads/a02.jpg'
},{
link:'/pages/user/user',
url:'../uploads/a03.jpg'
}
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
}
})
##Related recommendations:
detailed explanation of react carousel component react-slider-light
jquery implements PC-side carousel chart code
Two js ways to implement carousel chart
The above is the detailed content of WeChat applet carousel function development example. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
