微信小程序把玩（二十八）image组件

原文:微信小程序把玩（二十八）image组件

image组件也是一个程序不可缺少的，可以这样说一个app中image组件随处可以看到，一般 image有两种加载方式第一种是网络图片第二种是本地图片资源，都用src属性去指定。

重点属性：

三种缩放模式

九种剪切方式

wxml


<!--3中是缩放模式scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素aspectFit   保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。aspectFill  保持纵横比缩放图片，只保证图片的短边能完全显示出来-->
<view>aspectFit 保持纵横比缩放图片，只保证图片的短边能完全显示出来</view>
<image style="width: 100%; height:100%" mode="aspectFit" src="../../image/image.jpg"/><!--9种是裁剪模式top 不缩放图片，只显示图片的顶部区域bottom,同上leftrighttop righttop leftbottom rightbottom left
-->
<view>bottom 不缩放图片，只显示图片的底部区域</view>
<image style="width: 100%; height: 100%" mode="bottom" src="../../image/image.jpg"/><view>left 不缩放图片，只显示图片的左边区域</view>
<image style="width: 100%; height: 100%" mode="left" src="../../image/image.jpg"/><view>top right 不缩放图片，只显示图片的右上边区域</view>
<image style="width: 100%; height: 100%" mode="top right" src="../../image/image.jpg"/>

微信小程序把玩（二十八）image组件相关推荐

微信小程序把玩（十八）picker组件
为什么80%的码农都做不了架构师?>>> picker选择器分为三种,普通选择器,时间选择器, 日期选择器用mode属性区分,默认是普通选择器.测试时时间和日期点击无反应不知 ...
微信小程序把玩（十九）radio组件
原文:微信小程序把玩(十九)radio组件 radio组件为单选组件与radio-group组合使用,使用方式和checkbox没啥区别主要属性: wxml <!--设置监听器,当点击radi ...
微信小程序开发之十八 —— 云数据库入门
文章目录学习前后云数据库的基础知识数据库权限限制简易权限配置安全规则数据库查询查询指令command 条件查询法一:Collection.where 条件查询法二:Collection. ...
微信小程序把玩（十四）button组件
为什么80%的码农都做不了架构师?>>> button按钮用的算是最普遍的组件之一. 主要属性: wxml  <butto ...
微信小程序把玩（十一）icon组件
为什么80%的码农都做不了架构师?>>> 这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml  ...
微信小程序把玩（三十二）Image API
原文:微信小程序把玩(三十二)Image API 选择图片时可设置图片是否是原图,图片来源.这用的也挺常见的,比如个人中心中设置头像,可以与wx.upLoadFile()API使用主要方法: wx. ...
微信小程序把玩（二十六）navigator组件
微信小程序把玩(二十六)navigator组件原文:微信小程序把玩(二十六)navigator组件 navigator跳转分为两个状态一种是关闭当前页面一种是不关闭当前页面.用redirect属性指 ...
微信小程序把玩（四十）animation API
原文:微信小程序把玩(四十)animation API 动画水还是比较深的,这里只是简单介绍下小程序中动画的一些属性和注意事项,做动画前一定要整理好思路将动画一步步分解,再进行组合!这里只做引入. w ...
微信小程序把玩（三十五）Video API
原文:微信小程序把玩(三十五)Video API 电脑端不能测试拍摄功能只能测试选择视频功能,好像只支持mp4格式,值得注意的是成功之后返回的临时文件路径是个列表tempFilePaths而不是tem ...

微信小程序把玩（二十八）image组件

微信小程序把玩（二十八）image组件相关推荐

最新文章

热门文章