微信小程序媒體組件（二）image

發(fā)表時(shí)間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：71

記錄一下image的使用，比較簡(jiǎn)單。

1.先看一下屬性。

屬性名	類型	默認(rèn)值	說(shuō)明	最低版本
src	String		圖片資源地址
mode	String	'scaleToFill'	圖片裁剪、縮放的模式
lazy-load	Boolean	false	圖片懶加載。只針對(duì)page與scroll-view下的image有效	1.5.0
binderror	HandleEvent		當(dāng)錯(cuò)誤發(fā)生時(shí)，發(fā)布到 AppService 的事件名，事件對(duì)象event.detail = {errMsg: 'something wrong'}
bindload	HandleEvent		當(dāng)圖片載入完畢時(shí)，發(fā)布到 AppService 的事件名，事件對(duì)象event.detail = {height:'圖片高度px', width:'圖片寬度px'}

注：image組件默認(rèn)寬度300px、高度225px

mode 有效值：

mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

模式	值	說(shuō)明
縮放	scaleToFill	不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素
縮放	aspectFit	保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)。也就是說(shuō)，可以完整地將圖片顯示出來(lái)。
縮放	aspectFill	保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)。也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。
縮放	widthFix	寬度不變，高度自動(dòng)變化，保持原圖寬高比不變
裁剪	top	不縮放圖片，只顯示圖片的頂部區(qū)域
裁剪	bottom	不縮放圖片，只顯示圖片的底部區(qū)域
裁剪	center	不縮放圖片，只顯示圖片的中間區(qū)域
裁剪	left	不縮放圖片，只顯示圖片的左邊區(qū)域
裁剪	right	不縮放圖片，只顯示圖片的右邊區(qū)域
裁剪	top left	不縮放圖片，只顯示圖片的左上邊區(qū)域
裁剪	top right	不縮放圖片，只顯示圖片的右上邊區(qū)域
裁剪	bottom left	不縮放圖片，只顯示圖片的左下邊區(qū)域
裁剪	bottom right	不縮放圖片，只顯示圖片的右下邊區(qū)域

2.wxml代碼↓

<view>  
  <text>imagetext>  
  <view>  
    <view wx:for="{{array}}" wx:for-item="item">  
      <view class="imageText">{{item.text}}view>  
      <view class="imageContent">  
        <image class="imageStyle" mode="{{item.mode}}" src="{{src}}" binderror='imageError'>image>  
      view>  
    view>  
  view>  
view>

①array中mode定義了圖片的裁剪、縮放模式，text定義了圖片的注解，src圖片源，均在js文件中進(jìn)行定義。

data: {  
    src: '../../resources/image/bing.jpg',  
    array: [{  
      mode: 'scaleToFill',  
      text: 'scaleToFill：不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素'  
    }, {  
      mode: 'aspectFit',  
      text: 'aspectFit：保持縱橫比縮放圖片，使圖片的長(zhǎng)邊能完全顯示出來(lái)。也就是說(shuō)，可以完整地將圖片顯示出來(lái)。'  
    }, {  
      mode: 'aspectFill',  
      text: 'aspectFill:保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來(lái)。也就是說(shuō)，圖片通常只在水平或垂直方向是完整的，另一個(gè)方向?qū)?huì)發(fā)生截取。'  
    }, {  
      mode: 'widthFix',  
      text: 'widthFix:寬度不變，高度自動(dòng)變化，保持原圖寬高比不變'  
    }, {  
      mode: 'top',  
      text: 'top：不縮放圖片，只顯示圖片的頂部區(qū)域'  
    }, {  
      mode: 'bottom',  
      text: 'bottom：不縮放圖片，只顯示圖片的底部區(qū)域'  
    }, {  
      mode: 'center',  
      text: 'center：不縮放圖片，只顯示圖片的中間區(qū)域'  
    }, {  
      mode: 'left',  
      text: 'left：不縮放圖片，只顯示圖片的左邊區(qū)域'  
    }, {  
      mode: 'right',  
      text: 'right：不縮放圖片，只顯示圖片的右邊邊區(qū)域'  
    }, {  
      mode: 'top left',  
      text: 'top left：不縮放圖片，只顯示圖片的左上邊區(qū)域'  
    }, {  
      mode: 'top right',  
      text: 'top right：不縮放圖片，只顯示圖片的右上邊區(qū)域'  
    }, {  
      mode: 'bottom left',  
      text: 'bottom left：不縮放圖片，只顯示圖片的左下邊區(qū)域'  
    }, {  
      mode: 'bottom right',  
      text: 'bottom right：不縮放圖片，只顯示圖片的右下邊區(qū)域'  
    }]  
  },

②binderror監(jiān)聽(tīng)圖片錯(cuò)誤，在js中實(shí)現(xiàn)，查看錯(cuò)誤信息

imageError: function (e) {  
    console.log('============================================')  
    console.log('image發(fā)生error事件，攜帶值為', e.detail.errMsg)  
    console.log('============================================')  
  }

如，設(shè)定一個(gè)無(wú)法訪問(wèn)的src，控制臺(tái)輸出如下信息↓

3.效果圖
（1）縮放模式

①scalToFill模式：完全適應(yīng)image的width及height（在該例中，分別為280px和150px）
②asprctFit模式：按比例縮小，完整的將圖片顯示出來(lái)，多余的部分由背景色#ddd補(bǔ)充
③aspectFill模式：按比例縮小，保證至少一個(gè)方向完整顯示（紅色框約為被裁掉的部分）
④widthFix模式：寬度不變（該例中280px），高度自動(dòng)變化，保證圖片完整顯示。
（2）裁剪模式，看兩個(gè)例子：

完整的對(duì)應(yīng)位置如下圖所示↓

5.最后附上wxss的代碼

.imageStyle {  
  width: 280px;  
  height: 150px;  
  background: #ddd;  
}  
.imageText {  
  margin-top: 20px;  
}  
.imageContent {  
  width: 100%;  
  height: 100%;  
  display: flex;  
  justify-content: center;  
}