實(shí)現(xiàn)如圖所示輪播圖，具體編寫(xiě)步驟及原代碼請(qǐng)見(jiàn)下方
編寫(xiě) index.wxml
<!--輪播圖-->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{activeColor}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<navigator url="{{item.link}}" hover-class="navigator-hover">
<image src="{{item.url}}" class="slide-image" width="355" height="200" />
</navigator>
</swiper-item>
</block>
</swiper>
編寫(xiě)index.wxss文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-728466.html
/*輪播圖*/
.slide-image {
width: 100%;
}
編寫(xiě) index.js文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-728466.html
Page({
data: {
imgUrls: [
{
link: '/pages/index/index',
url: '/images/001.jpg'
}, {
link: '/pages/list/list',
url: '/images/002.jpg'
}, {
link: '/pages/list/list',
url: '/images/003.jpg'
}
],
indicatorDots: true, //小點(diǎn)
indicatorColor: "white",//指示點(diǎn)顏色
activeColor: "coral",//當(dāng)前選中的指示點(diǎn)顏色
autoplay: false, //是否自動(dòng)輪播
interval: 3000, //間隔時(shí)間
duration: 3000, //滑動(dòng)時(shí)間
}
})
到了這里，關(guān)于微信小程序-輪播圖的實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
