swiper組件是滑塊視圖容器，主要用來做圖片輪播。這篇文章主要給大家介紹了關(guān)于微信小程序輪播圖swiper代碼的相關(guān)資料,需要的朋友可以參考下
微信小程序自定義swiper
滑塊視圖容器。其中只可放置swiper-item組件，否則會導(dǎo)致未定義的行為。
style=“background:{{item}}” 報錯不要管，不影響頁面布局
<view class="container">
<swiper class="swiper1"
indicator-dots="{{indicatorDots}}" 是否顯示面板指示點
autoplay="{{autoplay}}" 是否自動切換
interval="{{interval}}" 自動切換時間間隔
duration="{{duration}}" 滑動動畫時長
circular="{{circular}}" 是否采用銜接滑動
indicator-active-color="#ff0099" 選中指示點顏色
>
<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%;
}
記住：
圖片跟背景顏色思路一樣
到此這篇關(guān)于微信小程序輪播圖swiper代碼的文章就介紹到這了,更多相關(guān)微信小程序輪播圖swiper代碼內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
來源：腳本之家
鏈接：https://www.jb51.net/article/201081.htm
申請創(chuàng)業(yè)報道，分享創(chuàng)業(yè)好點子。點擊此處，共同探討創(chuàng)業(yè)新機遇！
