• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

转微信小程序image组件的mode属性以及图片出现横向滚动轴

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

微信在3月27发布新增的六大能力中开放申请个人开发者啦!!因为公司也要做小程序,现在趁着项目在客户那边还没确定,于是自己搞了一个pixiv(也就是P站)的app(这个app名字就叫做pixiv)转成微信的小程序来练手(github地址)。【注明:目前只是练手,至少我觉得我自己是不可能发布的,不然会被视为侵权(希望开发这个app 的 人如果看到了这个github地址觉得侵权可以联系我给撤下来)】

这次要写的是image这个组件(注意是组件不是标签)。

写这篇文章的目的,是因为我使用image组件的mode属性中取值为缩放的时候,在图片下方出现了滚动轴。另外就是本文章只是为了区分开mode属性中的取值问题,并不给你什么有用的或者现成的搭配。只能说,如果你也是在对mode属性存在一些疑惑的话,希望能在这篇文章受到一点提示。

按套路,先上微信官方开发文档的截图

可以看到,image这个组件有四个属性,这次针对mode属性和我所做的小程序中用到的图片结合讲一下。

按照官方的mode,分为两类:一类缩放,一类裁剪。

我所做的pixiv是需要大量图片的网站。P站供画手们上传自己的作品。图片有大有小,按照这个,我们要做的可以分成两种

1、对上传上来的图片进行缩放(一般是缩小),放进我们规定好大小的格子中。

2、对上传上来的图片进行裁剪,假设我们只需要整张图片的中间部分就可以了。

因为上述的这两点还要针对小程序中的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%来区分。

1、有设置image的width:100%

 

aspectFill,有设置100%
scaleToFill,有设置100%

 

2、没有设置image的width:100%(可以看见,图片出现了横滚动轴)

 

aspectFill,没有设置100%
scaleToFill,没有设置100%


一开始我做的时候,是没有给图片设置width为100%的,于是出现了滚动轴,还特别奇怪。调试一看,原来是图片原本的320px的宽度已经超出了格子的宽度,并且image组件自己已经设定好overflow:hidden(如图,没有设置width为100%的时候image的width)

 

对于裁剪这个,应该就不用说了吧,这个很好理解。

 

结论就是:使用aspectFill或者scaleToFill最好还是给image的width设置为100%,就不会在图片下方出现横滚动轴啦。

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
WordPress社区商城小程序之酱茄Pro小程序发布订阅消息功能发布时间:2022-07-18
下一篇:
清云小程序教程:小程序的认证发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap