一、簡(jiǎn)介
微信小程序的輪播圖制作，且圖片不變形。1秒切換、自動(dòng)輪播、無(wú)縫切換
二、案例演示
三、案例代碼
index.wxml文件：
<!-- 輪播圖區(qū)域 -->
<swiper class="swiper-container" indicator-dots indicator-color="#fff" autoplay interval="3000" circular>
<!-- 輪播項(xiàng) -->
<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文件：
/**index.wxss**/
.swiper-container{
width: 100%;
}
.item{
height: 150px;
}
.item image{
width: 100%;
height: 100%;
}
完整示意圖
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-618589.html
四、代碼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>
五、總結(jié)
swiper網(wǎng)址：https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
image網(wǎng)址：https://developers.weixin.qq.com/miniprogram/dev/component/image.html
圖片處理方面：mode="aspectFill"用的比較多， 縮放模式，保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)。也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-618589.html
到了這里，關(guān)于微信小程序（原生）——輪播圖swiper、1秒切換、自動(dòng)輪播、無(wú)縫切換的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
