域名預(yù)訂/競(jìng)價(jià)，好“米”不錯(cuò)過(guò)

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

微信小程序自定義swiper

滑塊視圖容器。其中只可放置swiper-item組件，否則會(huì)導(dǎo)致未定義的行為。

 style=“background:{{item}}” 報(bào)錯(cuò)不要管，不影響頁(yè)面布局

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

再在index.js中寫

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

最后在index.wxss中寫

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

記?。?/strong>