当前位置:微信小程序开发 > 小程序资讯 > 小程序开发教程 > 微信小程序设置图片固定比例

微信小程序设置图片固定比例

2018-07-19 11:26 来源: 霸界科技

摘要:有时我们的图片并不是同一个比例,但是我们需要设置图片保持一个固定的比例,在微信小程序里面因为宽度固定为750rpx,所以我们如果需要设置宽高比为2 : 1的话直接设置图片css的宽为...

期权保本理财
  有时我们的图片并不是同一个比例,但是我们需要设置图片保持一个固定的比例,在微信小程序里面因为宽度固定为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中设置和上方一样。
分享到:
最新评论

网友:

验证码: 点击我更换图片

联系我们

业务咨询:15918761088

招商咨询:15918761088(微信同号)

周一至周五 9:30-18:30

公司地址:广州市海珠区昌岗中路166号富盈国际大厦2505室

官方微信 官方微博

Copyright © 2018 www.keji168.com 广州霸界网络科技有限公司版权所有 粤ICP备18083764号-1

客服
套餐咨询,合作细节等
在线客服
电话咨询
159-1876-1088