码迷,mamicode.com
首页 > 其他好文 > 详细

小程序轮播图部分

时间:2018-07-24 11:18:59      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:http   for   on()   get   data-   style   ndt   height   head   

轮播图

<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  
        })  
    },

 

小程序轮播图部分

标签:http   for   on()   get   data-   style   ndt   height   head   

原文地址:https://www.cnblogs.com/antyhouse/p/9358691.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!