微信小程序swiper组件中图片自适应

前端之家收集整理的这篇文章主要介绍了微信小程序swiper组件中图片自适应前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

index.wxml


      
    
  

index.js

图片的高度  
    imgheights: [],//图片宽度  
    imgwidth: 750,//默认  
    current: 0
},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,})
  },bindchange: function (e) {
    console.log(e.detail.current)
    this.setData({ current: e.detail.current })
  }
})

swiper中默认高度150px,使用bindchange="bindchange" style="height:{{imgheights[current]}}rpx;",使其高度变为当前选中图片的高度

其二,下面的单位为px而非rpx。


    
      
    
  
Page({
  data: {
    image: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',activeColor: "#1472e0",auto:{},cur:0
  },imageLoad: function (e) {
    var imageWidth = e.detail.width,//获取图片真实宽度
        imageHeight = e.detail.height,Imagescale = imageWidth / imageHeight; //宽高比
    var autoWidth = '',//自适应高宽
        autoHeight = '';
    wx.getSystemInfo({
      success: function(res) {
        autoWidth = res.windowWidth; //设备屏幕宽度
        autoHeight = autoWidth / Imagescale; //计算图片自适应高 
      }
    });
    var image = this.data.auto;
    image[e.target.dataset.index] = {
      width: autoWidth,height: autoHeight
    }
    console.log(image);
    this.setData({
      auto:image
    })
  },bindchange: function (e) {
    this.setData({ cur: e.detail.current })
  }
})
原文链接:https://www.f2er.com/weapp/417599.html

猜你在找的微信小程序相关文章