微信小程序?qū)崿F(xiàn)banner圖輪播效果

indicator-active-color="#007aff"http://修改選中圖片圓點(diǎn)的顏色

const app = getApp()
 
Page({
 data: {
 //-----------模擬banner圖-----------
 imgUrls: [
 '/image/1545118381903.jpg',
 '/image/1545118566631.jpg'
 ],
 circular: true,
 //是否顯示畫板指示點(diǎn) 
 indicatorDots: true,
 //選中點(diǎn)的顏色 
 //是否豎直 
 vertical: false,
 //是否自動(dòng)切換 
 autoplay: true,
 //自動(dòng)切換的間隔
 interval: 3000,
 //滑動(dòng)動(dòng)畫時(shí)長(zhǎng)毫秒 
 duration: 1000,
 //所有圖片的高度 
 imgheights: [],
 //圖片寬度 
 imgwidth: 750,
 //默認(rèn) 
 current: 0
 },
 imageLoad: function (e) {//獲取圖片真實(shí)寬度 
 var imgwidth = e.detail.width,
 imgheight = e.detail.height,
 //寬高比 
 ratio = imgwidth / imgheight;
 console.log(imgwidth, imgheight)
 //計(jì)算的高度值 
 var viewHeight = 750 / ratio;
 var imgheight = viewHeight;
 var imgheights = this.data.imgheights;
 //把每一張圖片的對(duì)應(yīng)的高度記錄到數(shù)組里 
 imgheights[e.target.dataset.id] = imgheight;
 this.setData({
 imgheights: imgheights
 })
 },
 bindchange: function (e) {
 // console.log(e.detail.current)
 this.setData({ current: e.detail.current })
 },
 }
})

<!-------------首頁(yè)輪播圖----------------- -->
<view class='swiper'>
 <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" >
 <block wx:for='{{imgUrls}}' wx:key="{{index}}">
 <swiper-item>
 <image src="{{item}}" data-id='{{index}}' class="slide-image" mode="widthFix" bindload="imageLoad" />
 </swiper-item>
 </block>
 </swiper>
</view>

.swiper image {
 width: 100%;
 height: auto;
}
 
.swiper-image {
 height: 100%;
 width: 100%;
}
 
.slide-image {
 height: 100%;
 width: 100%;
 display: block;
}