摘要:本文将带你了解微信小程序开发之设置图片固定比例,希望本文对大家学微信有所帮助。
今天介绍一个让图片在任何容器都保持固定比例的方法。
有时我们的图片并不是同一个比例,但是我们需要设置图片保持一个固定的比例,在小程序里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设置图片css的宽为一个固定值,然后高为固定值一半就行了。
这样在不同的屏幕下都能保持设定的比例。但是这样并不是很方便,比如我想封装一个自定义组件,作为列表的Cell(我是iOS开发来着。。。),我只要设置列表的宽度,Cell里面图片宽度和高度就定下来了。
首先我百度到两种方法:一、调用js操作DOM在小程序内无法直接操作DOM,但是微信也是提供了接口的:wxml节点信息API1.没有封装组件时,我们可以在js文件中的onShow方法中使用:onShow: function() { var that = this var query = wx.createSelectorQuery() query.select("#image").boundingClientRect(function(res) { console.log(res.width) that.setData({ height: res.width * 0.5 + 'px' }) }).exec()}在css中设置图片的宽width:100%,在wxml中设置图片:<image class='image' id='image' src='{{imageUrl}}' mode='aspectFill' style='height:{{height}}'></image>此时,当我们设置图片父视图的宽为任意值,图片都会保持2:1的比例。2、在自定义组件中,我们需要在ready方法中使用:ready:function() { var that = this var query = wx.createSelectorQuery().in(this) //此处多了in(this) query.select("#image").boundingClientRect(function(res) { console.log(res.width) that.setData({ height: res.width * 0.5 + 'px' }) }).exec()}组件内CSS和WXML中设置和上方一样。这里有一个封装好的组件的简单DEMO:将封装好的组件放到scrollView内将封装好的组件放到列表页内只要设定好组件的样式,里面图片以及内容都能完美适配。二、使用padding-bottom,overflow结合,具体参考这篇博客.我照着做了,效果也出来了,但是当我放到scrollView中时,因为图片太高了(虽然看不出来)
,只是被隐藏了,所以导致scrollView被撑得非常高,只能设置scrollView的高度才能正常显示,但此时又显得不够动态了,所以我放弃了这种方式,推荐大家使用第一种。
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之微信频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号