轉 微信小程序 image組件的mode屬性 以及 圖片出現橫向滾動軸

微信在3月27發佈新增的六大能力中開放申請我的開發者啦！！由於公司也要作小程序，如今趁着項目在客戶那邊還沒肯定，因而本身搞了一個pixiv（也就是P站）的app（這個app名字就叫作pixiv）轉成微信的小程序來練手（github地址）。【註明：目前只是練手，至少我以爲我本身是不可能發佈的，否則會被視爲侵權（但願開發這個app 的 人若是看到了這個github地址以爲侵權能夠聯繫我給撤下來）】

此次要寫的是image這個組件（注意是組件不是標籤）。

寫這篇文章的目的，是由於我使用image組件的mode屬性中取值爲縮放的時候，在圖片下方出現了滾動軸。另外就是本文章只是爲了區分開mode屬性中的取值問題，並不給你什麼有用的或者現成的搭配。只能說，若是你也是在對mode屬性存在一些疑惑的話，但願能在這篇文章受到一點提示。

按套路，先上微信官方開發文檔的截圖

能夠看到，image這個組件有四個屬性，此次針對mode屬性和我所作的小程序中用到的圖片結合講一下。

按照官方的mode，分爲兩類：一類縮放，一類裁剪。

我所作的pixiv是須要大量圖片的網站。P站供畫手們上傳本身的做品。圖片有大有小，按照這個，咱們要作的能夠分紅兩種

一、對上傳上來的圖片進行縮放（通常是縮小），放進咱們規定好大小的格子中。

二、對上傳上來的圖片進行裁剪，假設咱們只須要整張圖片的中間部分就能夠了。

由於上述的這兩點還要針對小程序中的view組件和scroll-view組件區分，這個涉及到了對image的width的設定，如今先講最普通的view組件。（對於scroll-view中出現的圖片， 也會出現滾動軸的狀況，連接在此：scroll-view中，image組件出現滾軸）

如圖，如今我有一張這麼大的圖片，我只要放進這麼小的格子裏面。（看紅框）

按照分類點，咱們來說第一點（縮放）我作的時候出現的問題。

（看下圖）這個小格子並無規定大小，它是一個weui-flex__item，也就是flex:1（在這裏就是佔據了整個橫面的50%）。對於image這個組件自己，我設置了width:100%（待會來看看若是把這個100% 去掉會怎樣）。對於咱們要調整的這張圖片，首先咱們明確了是縮放，也就是從scaleToFill、aspectFit、aspectFill、widthFix這四個值中取。下面就是四種對應顯示的樣子（看圖）。

 

乍一看，scaleToFill和aspectFill就是咱們要用的，可是感受好像scaleToFill和aspectFill沒有區別，展現的效果都是同樣同樣的。這就得說回咱們剛纔說的，有沒有給image組件設置了width:100%的問題，下面就針對有無100%來區分。

一、有設置image的width:100%

 

aspectFill，有設置100%
scaleToFill，有設置100%

 

二、沒有設置image的width:100%（能夠看見，圖片出現了橫滾動軸）

 

aspectFill，沒有設置100%
scaleToFill，沒有設置100%

一開始我作的時候，是沒有給圖片設置width爲100%的，因而出現了滾動軸，還特別奇怪。調試一看，原來是圖片本來的320px的寬度已經超出了格子的寬度，而且image組件本身已經設定好overflow:hidden（如圖，沒有設置width爲100%的時候image的width）

 

對於裁剪這個，應該就不用說了吧，這個很好理解。

 

結論就是：使用aspectFill或者scaleToFill最好仍是給image的width設置爲100%，就不會在圖片下方出現橫滾動軸啦。