转 微信小程序 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%，就不会在图片下方出现横滚动轴啦。