轮播图
<view class="swiper-container"> <swiper autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" bindchange="swiperChange" current="{{swiperCurrent}}" style="height:{{imgheights[swiperCurrent]}}rpx;"> <block wx:for="{{imgUrls}}"> <swiper-item> <image src="{{item.image}}" class="slide-image" mode="widthFix" bindtap="bannerjump" data-url="{{item}}" bindload="imageLoad" style="height:{{imgheights[swiperCurrent]}}rpx;{{imgwidth}}rpx;"/> </swiper-item> </block> </swiper> <view class="dots"> <block wx:for="{{imgUrls}}" wx:key="unique"> <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view> </block> </view> </view>
autoplay: false, interval: 2000, duration: 300,
swiperCurrent: 0
getbanner: function() { var that = this; // 初始化或清空数组 that.setData({ imgUrls: [], isLoading: false, loadText: '数据加载中' }) wx.request({ url: 'https://try.fishqc.com/getBannerInfo', //请求接口地址 header: { 'content-type': 'application/json' // 默认值 }, data:{ location:3 }, success: function(res) { that.setData({ isLoading: true, loadText: '数据加载中', imgUrls: res.data.data }) } }) },
imageLoad: function (e) { //获取图片真实宽度 var imgwidth = e.detail.width, imgheight = e.detail.height, //宽高比 ratio = imgwidth / imgheight; // console.log(imgwidth, imgheight) //计算的高度值 var viewHeight = 750 / ratio; var imgheight = viewHeight var imgheights = this.data.imgheights //把每一张图片的高度记录到数组里 imgheights.push(imgheight) this.setData({ imgheights: imgheights, }) },
swiperChange: function(e){ this.setData({ swiperCurrent: e.detail.current }) },