欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序开发填坑《二十四》swiper无法保持宽高比

发布：2018-01-25 10:39浏览： 次来源：网络 作者：tianshu

swiper 里的图片大小如何设置 呢？ 为什么  给了高度以后就不按比例来显示呢？


小程序开发填坑《二十四》swiper无法保持宽高比(图1) 

参考答案一：用rpx做单位即可


  1. swiper {
  2. 　　height: 300rpx;
  3. }
  4.  
  5. swiper-item image {
  6. 　　width: 100%;
  7. 　　height: 100%;
  8. }


rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。




参考答案二：图片等比例缩放，获取屏幕尺寸图片尺寸 自适应
直接上代码吧。

index.wxml
  1. <!--index.wxml-->  
  2. <!--图片宽大于屏幕宽-->  
  3. <image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{imagefirstsrc}}" bindload="imageLoad"></image>  
  4. <!--图片高大于屏幕高-->  
  5. <!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{imagesecondsrc}}" bindload="imageLoad"></image>-->  
  6. <!--图片宽高大于屏幕宽高-->  
  7. <!--<image style="width: {{imagewidth}}px; height: {{imageheight}}px;"  src="{{imagethirdsrc}}" bindload="imageLoad"></image>-->  


index.js
  1. //index.js  
  2. //获取应用实例  
  3. var imageUtil = require('../../utils/util.js');  
  4. var app = getApp()  
  5. Page({  
  6.   data: {  
  7.     imagefirstsrc: 'https://bpic.588ku.com/back_pic/00/03/85/1656205138bbe2d.png',//图片链接  
  8.     imagesecondsrc: 'https://bpic.588ku.com/back_pic/04/07/63/28581203949ca9d.jpg!/fw/400/quality/90/unsharp/true/compress/true',//图片链接  
  9.     imagethirdsrc:'https://img1.gtimg.com/ent/pics/hv1/13/71/2061/134034643.jpg',  
  10.     imagewidth: 0,//缩放后的宽  
  11.     imageheight: 0,//缩放后的高  
  12.   
  13.   },  
  14.   onLoad: function () {  
  15.   },  
  16.   imageLoad: function (e) {  
  17.     var imageSize = imageUtil.imageUtil(e)  
  18.     this.setData({  
  19.       imagewidth: imageSize.imageWidth,  
  20.       imageheight: imageSize.imageHeight  
  21.     })  
  22.   }  
  23. })  


util.js
  1. //util.js  
  2. function imageUtil(e) {  
  3.   var imageSize = {};  
  4.   var originalWidth = e.detail.width;//图片原始宽  
  5.   var originalHeight = e.detail.height;//图片原始高  
  6.   var originalScale = originalHeight/originalWidth;//图片高宽比  
  7.   console.log('originalWidth: ' + originalWidth)  
  8.   console.log('originalHeight: ' + originalHeight)  
  9.   //获取屏幕宽高  
  10.   wx.getSystemInfo({  
  11.     success: function (res) {  
  12.       var windowWidth = res.windowWidth;  
  13.       var windowHeight = res.windowHeight;  
  14.       var windowscale = windowHeight/windowWidth;//屏幕高宽比  
  15.       console.log('windowWidth: ' + windowWidth)  
  16.       console.log('windowHeight: ' + windowHeight)  
  17.       if(originalScale < windowscale){//图片高宽比小于屏幕高宽比  
  18.         //图片缩放后的宽为屏幕宽  
  19.          imageSize.imageWidth = windowWidth;  
  20.          imageSize.imageHeight = (windowWidth * originalHeight) / originalWidth;  
  21.       }else{//图片高宽比大于屏幕高宽比  
  22.         //图片缩放后的高为屏幕高  
  23.          imageSize.imageHeight = windowHeight;  
  24.          imageSize.imageWidth = (windowHeight * originalWidth) / originalHeight;  
  25.       }  
  26.        
  27.     }  
  28.   })  
  29.   console.log('缩放后的宽: ' + imageSize.imageWidth)  
  30.   console.log('缩放后的高: ' + imageSize.imageHeight)  
  31.   return imageSize;  
  32. }  
  33.   
  34. module.exports = {  
  35.   imageUtil: imageUtil  
  36. }  





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有