微信小程序設(shè)置圖片固定比例

今天介紹一個(gè)讓圖片在任何容器都保持固定比例的方法。

有時(shí)我們的圖片并不是同一個(gè)比例，但是我們需要設(shè)置圖片保持一個(gè)固定的比例，在小程序里面因?yàn)閷挾裙潭?50rpx,所以我們?nèi)绻枰O(shè)置寬高比為2 : 1的話直接設(shè)置圖片css的寬為一個(gè)固定值，然后高為固定值一半就行了。這樣在不同的屏幕下都能保持設(shè)定的比例。

但是這樣并不是很方便，比如我想封裝一個(gè)自定義組件，作為列表的Cell（我是iOS開發(fā)來(lái)著。。。），我只要設(shè)置列表的寬度，Cell里面圖片寬度和高度就定下來(lái)了。

調(diào)用js操作DOM

在小程序內(nèi)無(wú)法直接操作DOM，但是微信也是提供了接口的：wxml節(jié)點(diǎn)信息API

1.沒(méi)有封裝組件時(shí)，我們可以在js文件中的onShow方法中使用：

1. onShow: function() {
2. var that = this
3. var query = wx.createSelectorQuery()
4. query.select("#image").boundingClientRect(function(res) {
5. console.log(res.width)
6. that.setData({
7. height: res.width * 0.5 + 'px'
8. })
9. }).exec()
10. }

在css中設(shè)置圖片的寬width:100%,在wxml中設(shè)置圖片：

1. <image class='image' id='image' src='{{imageUrl}}' mode='aspectFill' style='height:{{height}}'></image>

此時(shí)，當(dāng)我們?cè)O(shè)置圖片父視圖的寬為任意值，圖片都會(huì)保持2：1的比例。

2、在自定義組件中，我們需要在ready方法中使用：

1. ready:function() {
2. var that = this
3. var query = wx.createSelectorQuery().in(this) //此處多了in(this)
4. query.select("#image").boundingClientRect(function(res) {
5. console.log(res.width)
6. that.setData({
7. height: res.width * 0.5 + 'px'
8. })
9. }).exec()
10. }

組件內(nèi)CSS和WXML中設(shè)置和上方一樣。

這里有一個(gè)封裝好的組件的簡(jiǎn)單DEMO：

將封裝好的組件放到scrollView內(nèi)

將封裝好的組件放到列表頁(yè)內(nèi)

只要設(shè)定好組件的樣式，里面圖片以及內(nèi)容都能完美適配。