1.效果
2.代码
wxml
<!--page/swipe/swipe.wxml-->
<view class="top-slides-box" style="margin-top: -{{80 + (44 - statusBar)*2}}rpx">
<view class="swiper">
<swiper class="swiper-box" indicator-dots="true" current="{{current}}" autoplay="true" interval="5000" duration="500" circular="true" indicator-color="#fdfdfd" indicator-active-color="#ed4861" style="height:{{imgheights[0] - 5}}px;">
<block wx:for="{{topAdData}}" wx:for-index="idx" wx:key="idx">
<swiper-item class="swiper-item" data-item="{{item}}" data-index="{{idx}}" bindtap="onSlideClick">
<image class="img" src="{{item.picturePath}}" mode='widthFix' bindload="imageLoad"></image>
</swiper-item>
</block>
</swiper>
</view>
</view>
wxss
/* page/swipe/swipe.wxss */
.top-slides-box {
position: relative;
width: 100%;
margin-top: -80rpx;
}
.top-slides-box .swiper {
width: 100%;
}
.top-slides-box swiper {
min-height: 250px;
}
.top-slides-box .swiper .img {
width: 100%;
}
json
{
"usingComponents": {},
"navigationStyle": "custom"
}
js
// page/swipe/swipe.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
statusBar: app.globalData.statusBar,
imgheights: [], //轮播图高度列表
current: 0, //当前的轮播图ID,设置为0,不然第一张图片的高度会加载不出来
topAdData: null, //轮播广告
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
// 设置轮播图片
let array = [];
for(let i=0; i<4; i++){
let tmp={};
tmp.picturePath = '/image/ad'+ (i+1) +'.jpg';
array.push(tmp);
}
this.setData({
topAdData: array
});
},
//图片加载函数,获取每张图片的真实高度,按比例兑换成显示出来的高度,存储下来,以自适应轮播图高度
imageLoad: function (e) { //获取图片真实宽度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比
ratio = imgwidth / imgheight;
//计算的高度值
var viewHeight = app.globalData.systemInfo.windowWidth / ratio;
//把每一张图片的对应的高度记录到数组里
let imgheights = this.data.imgheights
imgheights.push(viewHeight);
this.setData({
imgheights: imgheights
})
},
onSlideClick: function (event){
let item = event.currentTarget.dataset.item;
let index = event.currentTarget.dataset.index;
console.log("item:", item);
console.log("index:", index);
}
})
在app.js中需要提前获取状态栏高度
wx.getSystemInfo({
success: e => {
this.globalData.statusBar = e.statusBarHeight; //状态栏高度
let custom = wx.getMenuButtonBoundingClientRect(); //菜单按钮
this.globalData.custom = custom;
this.globalData.customBar = (custom.top - e.statusBarHeight) * 2 + custom.height + 4;
//计算得到定义的状态栏高度
this.globalData.systemInfo = e;
}
})