江苏快三:微信小程序設置圖片固定比例

江苏快三 www.amavm.com 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的高度才干畸形顯示,但此時又顯得不夠動態了,所以我放棄了這種方法,推薦大家利用第一種。
江苏快三
電話
江苏快三
聯系
{ganrao}