1. 程式人生 > >小程序輪播圖部分

小程序輪播圖部分

計算 var ext index detail view header () set

輪播圖

<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;width:{{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  
        })  
    },

小程序輪播圖部分