本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)banner圖輪播的具體代碼,供大家參考,具體內(nèi)容如下
效果圖:

indicator-active-color="#007aff"http://修改選中圖片圓點(diǎn)的顏色
js:
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 }) }, }})wxml:
<!-------------首頁輪播圖----------------- --><view class='swiper'> <swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" interval='{{interval}}'indicator-active-color="#007aff" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;"> <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>wxss:
.swiper image { width: 100%; height: auto;} .swiper-image { height: 100%; width: 100%;} .slide-image { height: 100%; width: 100%; display: block;}以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注