微信小程序使用swiper組件實現層疊輪播圖

來源：懂視網責編：小OO 時間：2020-11-27 22:05:33

微信小程序使用swiper組件實現層疊輪播圖

本文實例為大家分享了微信小程序實現層疊輪播圖的具體代碼，供大家參考，具體內容如下：wxml。<；view class="banner-swiper">；<；<；block wx：for="{{arr}}" wx：key="key">；<；swiper-item>；<；image src="{{item.images}}" class="slide-image{{index == swiperCurrent ?；' active' ： ''}}" bindchange="chuangEvent" id="{{index}}">；<；/image>；<；/swiper-item>；<；/block>；<。

推薦度：

點擊下載本文 文檔為doc格式

導讀本文實例為大家分享了微信小程序實現層疊輪播圖的具體代碼，供大家參考，具體內容如下：wxml。<；view class="banner-swiper">；<；<；block wx：for="{{arr}}" wx：key="key">；<；swiper-item>；<；image src="{{item.images}}" class="slide-image{{index == swiperCurrent ?；' active' ： ''}}" bindchange="chuangEvent" id="{{index}}">；<；/image>；<；/swiper-item>；<；/block>；<。

本文實例為大家分享了微信小程序實現層疊輪播圖的具體代碼，供大家參考，具體內容如下

wxml:

<view class="banner-swiper">
 <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" current='{{swiperCurrent}}' 
indicator-color="{{beforeColor}}" indicator-active-color="{{afterColor}}" circular='{{circular}}' 
previous-margin="{{previousmargin}}" next-margin="{{nextmargin}}" bindchange="swiperChange" >
 <block wx:for="{{arr}}" wx:key="key"> 
 <swiper-item>
 <image src="{{item.images}}" class="slide-image{{index == swiperCurrent ? ' active' : ''}}" 
bindchange="chuangEvent" id="{{index}}"></image>
 </swiper-item>
 </block> 
 </swiper>
 </view>

wxss:

.banner-swiper {
 width: 100%;
 height: 500rpx;
 overflow: hidden;
}

swiper {
 display: block;
 height: 500rpx;
 position: relative;
}

.slide-image {
 width: 96%;
 display: block;
 margin: 0 auto;
 height: 450rpx;
 margin-top:25rpx;
}
.active{
 margin-top:0rpx;
 height: 500rpx;
}

js:

Page({
 data: {
 //輪播圖
 swiperCurrent:1,
 arr: [{
 images: 'images/1.jpg'
 },
 {
 images: 'images/5.jpg'
 },
 {
 images: 'images/3.jpg'
 },
 {
 images: 'images/4.jpg'
 }
 ]
 indicatorDots: true,
 autoplay: true,
 interval: 2000,
 duration: 1000,
 circular: true,
 beforeColor: "white",//指示點顏色 
 afterColor: "coral",//當前選中的指示點顏色 
 previousmargin:'30px',//前邊距
 nextmargin:'30px',//后邊距
 
 },
 
 //輪播圖的切換事件 
 swiperChange: function (e) {
 console.log(e.detail.current);
 this.setData({
 swiperCurrent: e.detail.current //獲取當前輪播圖片的下標
 })
 },
 //滑動圖片切換 
 chuangEvent: function (e) { 
 this.setData({
 swiperCurrent: e.currentTarget.id
 })
 },
})

效果圖：