您的位置:首页 > 移动开发 > 微信开发

小程序swiper高度自适应

2018-02-08 22:20 459 查看
小程序swiper高度自适应[html]view plaincopydata: {  
/图片  
hdimg: [],  
//是否采用衔接滑动  
circular: true,  
//是否显示画板指示点  
indicatorDots: false,  
//选中点的颜色  
indicatorcolor: "#000",  
//是否竖直  
vertical: false,  
//是否自动切换  
autoplay: false,  
//滑动动画时长毫秒  
duration: 100,  
//所有图片的高度  
imgheights: [],  
//图片宽度  
imgwidth: 750,  
//默认  
current:0  
[html]view plaincopyimageLoad: 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,  
    })  
  },  
  bindchange: function (e) {  
    console.log(e.detail.current)  
    this.setData({ current: e.detail.current})  
  }  
[html]view plaincopy<view>
<swiperclass="swiper"indicator-dots="{{indicatorDots}}"vertical="{{vertical}}"autoplay="{{autoplay}}"duration="{{duration}}"bindchange="bindchange"circular="{{circular}}"style="height:{{imgheights[current]}}rpx;">
<blockwx:for="{{hdimg}}"wx:key="{{index}}">
<swiper-item>
<imagesrc="{{item}}"mode="aspectFit"bindload="imageLoad"
class=".itemimage"style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"/>
swiper-item>
block>
swiper>
view>

[html]view plaincopy.swiper {  
  width: 100%;  
}  
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: