今天介绍一个让图片在任何容器都保持固定比例的方法。
有时我们的图片并不是同一个比例，但是我们需要设置图片保持一个固定的比例，在小程序里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设置图片css的宽为一个固定值，然后高为固定值一半就行了。这样在不同的屏幕下都能保持设定的比例。
但是这样并不是很方便，比如我想封装一个自定义组件，作为列表的Cell（我是iOS开发来着。。。），我只要设置列表的宽度，Cell里面图片宽度和高度就定下来了。
调用js操作DOM
在小程序内无法直接操作DOM，但是微信也是提供了接口的：wxml节点信息API
1.没有封装组件时，我们可以在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内
将封装好的组件放到列表页内
只要设定好组件的样式，里面图片以及内容都能完美适配。
多程序小程序工具提供多类型商城/门店小程序制作，可视化编辑 1秒生成5步上线。通过拖拽、拼接模块布局小程序商城页面，所看即所得，只需要美工就能做出精美商城。更多小程序商店请查看：小程序商店
上一篇：小程序验证码倒计时获取方式
下一篇：微信小程序根据经纬度规划路线
***本网站图片，文字之类版权申明，因为网站可以由注册用户自行上传图片或文字，本网站无法鉴别所上传图片或文字的知识版权，如果侵犯，请及时通知我们，本网站将在第一时间及时删除。
我要评论
最新文章
热门阅读
热评文章
热门标签
考古APP开发 感受历史的魅力考古APP开发安全教育app开发解决方案门店小程序类目资质表广州APP开发企业APP制作公司一招告诉你小程序码怎么生成？一文告诉你为什么鲜花店老板主动要做小程序?微信小程序好做吗？如何制作一个购买东西的小程序上海茶楼预约小程序开发越来越受青睐微信运营公众平台开发小技巧大用途为什么说门店小程序和普通小程序有着天壤之别？现在使用微信小程序收费吗微信小程序开发要很多钱吗？微信小程序插件的有什么意义呢？小程序分销超过三级什么样的微信小程序会是爆款西安哪些行业适合开发微信小程序零基础开发小程序商城之支付功能个人如何开发微信小程序微信小程序开发文档之本地调试配置如何搭建新手如何制作小程序深圳做得好的小程序公司西安微信小程序创业为什么会失败如何选择一家好的小程序开发公司微信小程序的存在价值你知道吗？小程序开发:哪类行业小程序比较容易成功？小程序定位附近店铺带来的商机，如何创建微信小程序登录授权界面如何开发小程序全屏展示图片的实现方式微信小程序支付申请微信小程序支付开发详解