E企盈营销工具技术服务商 热线:4006-838-530

微信小程序image控件图片自适应

E企盈直播平台营销卖货系统

因为最近iOS的工作量比较少,因此就和公司大牛开始了小程序开发,由于是新手,许多东西总是喜欢问问同事,免得走弯路,再问了同事之后,建议我用七牛的图片处理方式来自适应图片,因为用七牛的处理方式,需要向七牛发起一个请求获得图片基本信息之后才能裁剪出自己想要的方式,对于一个懒癌晚期的开发者来说,我是绝对不想这么做的。因为在iOS中aspectToSacle这个属性,因此我坚信在微信小程序里面应该也有类似的方法。在问了前端同事后,他告诉我没有解决办法,需要让后台返回一个正方形图片,我和后台小哥交流了一下,他们并不想加这个逻辑,说是也是需要通过七牛的方式去裁切图片,我认为这是不太方便的。他们也不想为了我这个图片在数据库里添加一个字段或者保存一个默认图,而且保存了固定的图以后扩展性也很差。因此我查看了小程序的开发文档,发现image容器有一个mode属性来控制图片的缩放和裁切方式。之前代码如下:image class=’sizeModal-img’ src=’ {{selected.image || spec.productFirstImage}}’/image之前的效果修改之后代码如下:image class=’sizeModal-img’ mode=’aspectFill’ src=’ {{selected.image || spec.productFirstImage}}’/image添加上述代码之后效果以下是微信小程序图片控件的属性说明image图片。属性名类型默认值说明最低版本srcString 图片资源地址 modeString’scaleToFill’图片裁剪、缩放的模式 lazy-loadBooleanfalse图片懒加载。只针对page与scroll-view下的image有效1.5.0binderrorHandleEvent 当错误发生时,发布到 AppService 的事件名,事件对象event.detail = {errMsg: ‘something wrong’} bindloadHandleEvent 当图片载入完毕时,发布到 AppService 的事件名,事件对象event.detail = {height:’图片高度px’, width:’图片宽度px’}注:image组件默认宽度300px、高度225pxmode 有效值:mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。模式 值 说明缩放 scaleToFill 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素缩放 aspectFit 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显示出来。缩放 aspectFill 保持纵横比缩放图片,只保证图片的短边能完全显示出来。也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取。缩放 widthFix 宽度不变,高度自动变化,保持原图宽高比不变裁剪 top 不缩放图片,只显示图片的顶部区域裁剪 bottom 不缩放图片,只显示图片的底部区域裁剪 center 不缩放图片,只显示图片的中间区域裁剪 left 不缩放图片,只显示图片的左边区域裁剪 right 不缩放图片,只显示图片的右边区域裁剪 top left 不缩放图片,只显示图片的左上边区域裁剪 top right 不缩放图片,只显示图片的右上边区域裁剪 bottom left 不缩放图片,只显示图片的左下边区域裁剪 bottom right 不缩放图片,只显示图片的右下边区域查看微信小程序image组建API作者:ChinaGoodStaff链接:https://www.jianshu.com/p/ae335d50b67d来源:简书简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序image控件图片自适应
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏