1. Introduction
Production of carousel images for WeChat mini programs without deformation of images. 1 second switching, automatic carousel, seamless switching
2. Case demonstration
3. Case code
index.wxml file:
<!-- 轮播图区域 -->
<swiper class="swiper-container" indicator-dots indicator-color="#fff" autoplay interval="3000" circular>
<!-- 轮播项 -->
<swiper-item>
<view class="item">
<image src="../img/1.jpg" mode="aspectFill"></image>
</view>
</swiper-item>
<swiper-item>
<view class="item">
<image src="../img/2.jpeg" mode="aspectFill"></image>
</view>
</swiper-item>
<swiper-item>
<view class="item">
<image src="../img/3.jpg" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
index.wxss file:
/**index.wxss**/
.swiper-container{
width: 100%;
}
.item{
height: 150px;
}
.item image{
width: 100%;
height: 100%;
}
Complete schematic
4. Code 2
data: {
banners: [{
'src': '../../images/1.jpeg'
},
{
'src': '../../images/2.jpeg'
},
{
'src': '../../images/3.jpg'
},
{
'src': '../../images/4.jpg'
},
{
'src': '../../images/5.jpeg'
}],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500,
circular: true
},
<swiper indicator-dots="{
{indicatorDots}}" autoplay="{
{autoplay}}" interval="{
{interval}}" duration="{
{duration}}" circular="{
{circular}}">
<block wx:for="{
{banners}}" wx:key="*this">
<swiper-item><image src="{
{item.src}}" mode="aspectFill"></image></swiper-item>
</block>
</swiper>
5. Summary
swiper URL: https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
image URL: https://developers.weixin.qq.com/miniprogram/dev/component/image.htmlimage
processing Aspects: mode="aspectFill"The most commonly used zoom mode is to keep the aspect ratio of the picture and only ensure that the short side of the picture can be fully displayed. That is, the image is usually complete only in the horizontal or vertical direction, and clipping will occur in the other direction.