swiper組件是滑塊視圖容器(qì)，主要用來做圖片輪播。這篇文(wén)章主要給大家介紹了關(guān)于微信小程序輪播圖swiper代碼的相關(guān)資(zī)料,需要的朋友可(kě)以參考下(xià)

微信小程序自定義swiper

滑塊視圖容器(qì)。其中(zhōng)隻可(kě)放置swiper-item組件，否則會導緻未定義的行為。

 style=“background:{{item}}” 報錯不要管，不影響頁面布局

<view class="container">
<swiper class="swiper1"
indicator-dots="{{indicatorDots}}" 是否顯示面闆指示點
autoplay="{{autoplay}}" 是否自動(dòng)切換
interval="{{interval}}" 自動(dòng)切換時間間隔
duration="{{duration}}" 滑動(dòng)動(dòng)畫時長
circular="{{circular}}" 是否采用銜接滑動(dòng)
indicator-active-color="#ff0099" 選中(zhōng)指示點顔色
>
<block wx:for="{{background}}" wx:key="index"> 循環遍曆數據
<swiper-item>
<view class="swiper-item" style="background:{{item}}"></view>
</swiper-item>
</block>
</swiper>
</view>

再在index.js中(zhōng)寫

Page({
data: {
background: ["red", "pink","yellowgreen"],
indicatorDots: true,
vertical: false,
autoplay: true,
interval: 2000,
duration: 500,
circular:true
}
})

最後在index.wxss中(zhōng)寫

.swiper1{
width: 100%;
height: 200px;
}
.swiper-item{
width: 100%;
height: 100%;
}

記住：

圖片跟背景顔色思路(lù)一樣

到此這篇關(guān)于微信小程序輪播圖swiper代碼的文(wén)章就介紹到這了,更多相關(guān)微信小程序輪播圖swiper代碼内容請搜索腳本之家以前的文(wén)章或繼續浏覽下(xià)面的相關(guān)文(wén)章希望大家以後多多支持腳本之家！