阜阳网站建设,专业网站制作,微信公众号建设,小程序开发制作公司就选讯拓互联网,一家专注网站优化和微营销的网络公司

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

2020-05-28 04:58



今天介绍一个让图片在任何容器都坚持固定比例的方法。阜阳小程序制作专注于面向微信小程序、百度小程序(智能小程序)、支付宝小程序、今日头条小程序、QQ轻应用(即QQ小程序)、抖音小程序、快应用(手机厂商基于硬件平台共同推出的新型应用)等小程序开发者与用户提供小程序相关开发技术、制作案例、渠道分发、流量变现、行业资讯等信息的发布与传播服务。有时咱们的图片并不是同一个比例,然而咱们须要设置图片坚持一个固定的比例,在小程序里面因为宽度固定为750rpx,所以咱们假如须要设置宽高比为2 : 1的话直接设置 ..
今天介绍一个让图片在任何容器都坚持固定比例的方法。阜阳小程序制作专注于面向微信小程序、百度小程序(智能小程序)、支付宝小程序、今日头条小程序、QQ轻应用(即QQ小程序)、抖音小程序、快应用(手机厂商基于硬件平台共同推出的新型应用)等小程序开发者与用户提供小程序相关开发技术、制作案例、渠道分发、流量变现、行业资讯等信息的发布与传播服务。阜阳微信小程序它可以在微信内被便捷地获取和传播,用户随时可用,用完即走,实现了应用“触手可及”的梦想。
有时咱们的图片并不是同一个比例,然而咱们须要设置图片坚持一个固定的比例,在小程序里面因为宽度固定为750rpx,所以咱们假如须要设置宽高比为2 : 1的话直接设置图片css的宽为一个固定值,而后高为固定值一半就行了。这样在不同的屏幕下都能坚持设定的比例。
然而这样并不是很便利,比方我想封装一个自定义组件,作为列表的Cell(我是iOS开发来着。阜阳小程序开发集小程序开发、制作、分发、推广、交易、行业资讯等服务于一体的综合门户网站。阜阳小程序制作专注于面向微信小程序、百度小程序(智能小程序)、支付宝小程序、今日头条小程序、QQ轻应用(即QQ小程序)、抖音小程序、快应用(手机厂商基于硬件平台共同推出的新型应用)等小程序开发者与用户提供小程序相关开发技术、制作案例、渠道分发、流量变现、行业资讯等信息的发布与传播服务。。),我只有设置列表的宽度,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内
将封装好的组件放到列表页内
只有设定好组件的款式,里面图片以及内容都能完美适配。

  二、利用padding-bottom,overflow结合,具体参考这篇博客.
我照着做了,后果也出来了,然而当我放到scrollView中时,因为图片太高了(诚然看不出来),只是被隐藏了,所以导致scrollView被撑得十分高,只能设置scrollView的高度才干畸形显示,但此时又显得不够动态了,所以我放弃了这种方法,推荐大家利用第一种。
首页
电话
短信
联系