文档章节

微信小程序把玩(二十八)image组件

Mr韦淋
 Mr韦淋
发布于 2017/05/07 20:23
字数 360
阅读 7
收藏 0
点赞 0
评论 0

这里写图片描述

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,同上 left right top right top left bottom right bottom 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"/>

本文转载自:http://blog.csdn.net/u014360817/article/details/52675624

共有 人打赏支持
Mr韦淋
粉丝 2
博文 80
码字总数 23114
作品 0
江门
高级程序员
一大波编程视频资料赠送(亲自整理)

为了感恩大家长久以来的关注和支持,小编准备了一些福利,整理了包含前端,Java,产品经理,微信小程序,Python,网站源码,Android应用视频教程,微信公众平台开发教程及材料等资源合集大放...

祈澈姑娘 ⋅ 05/08 ⋅ 0

分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle ⋅ 04/18 ⋅ 0

憧憬Licoy/wepy-com-loadings

微信小程序Loading加载动画组件 基于Wepy开发的微信小程序loading加载动画组件 说明 安装 npm i wepy-com-loadings 使用 import wepy from 'wepy'import Loadings from "wepy-com-loadings"e...

憧憬Licoy ⋅ 04/26 ⋅ 0

wx-jq:一套完全原创的微信小程序插件集合库

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 在线演示: 下载地址...

透笔度 ⋅ 01/25 ⋅ 2

微信小程序 UI 组件库 - iView Weapp

iView Weapp —— 一套高质量的微信小程序 UI 组件库 iView Weapp 是什么? 微信小程序提供了自定义组件的功能,这使得 iView Weapp 成为了可能。小程序已经提供了很多组件和 API,但它们过于...

aresn ⋅ 06/11 ⋅ 0

透笔度/wx-jq

wx-jq (一套完全原创的微信小程序插件集合库) 微信小程序插件,微信小程序组件,微信小程序插件集合,微信小程序组件集合,微信小程序插件学习,微信小程序插件开发, 查看效果截图: http...

透笔度 ⋅ 01/26 ⋅ 0

iView 发布微信小程序 UI 组件库 iView Weapp

末尾有彩蛋。 过去的两年里,iView 开源项目已经帮助成千上万的开发者快速完成网站开发,大幅度提高了开发效率,成为 Vue.js 生态里重要的一部分。 与此同时,我们也在思考,除了服务 PC Web...

Aresn ⋅ 06/11 ⋅ 0

小程序scroll-view 实现大图滚动显示总结

有一张大图宽度较大, 一个屏幕展示不开, 需要自动滚动 scrollview显示 wxml

SuShine ⋅ 04/19 ⋅ 0

微信小程序开发--『狗蛋TV』

狗蛋TV 狗蛋TV是基于微信小程序开发的一款App。gordanLee每天都会推荐一首歌、一篇文章、一段短视频,每天用十分钟的细碎时光,点燃内心的光明。目前分为音乐,短视频,影评三个模块。 线上开...

李帅醒 ⋅ 05/15 ⋅ 0

海报生成,但是微信小程序的绘图不能使用自定义弹窗,怎么实现功能

微信小程序,有一个需求 做海报生成,编写自己的文字内容保存海报生成图片,使用微信小程序的绘图api无法使用自定义弹窗实现文字内容修改,自定义弹窗层级在原生组件下层,有什么办法实现海报...

鱼被吃了 ⋅ 04/26 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

门面模式

1. 门面模式定义理解 是比较常用的封装模式,也称为外观模式; 标准定义:Provide a unified interface to a set of interfaces in a subsystem.Facade defines a higher-level interface t...

liuyan_lc ⋅ 20分钟前 ⋅ 0

SpringCloud 微服务 (九) Spring Cloud Bus

壹 本篇结合上篇学习使用SpringCloud Bus结合MQ来实现自动刷新 上篇有远端git码云,本地git,config统一配置中心服务,order服务,product服务 过程: 启动服务时,config服务将远端git的配置拉取到...

___大侠 ⋅ 21分钟前 ⋅ 0

别被别人抢走了你的时间!

前两天,有读者在评论区给我留言,问我类似于 618、双十一这样的电商狂欢,我会参与么? 我给他的回复很直接,我很少参与这类活动,尤其是一些整点抢券的行为,更加不会参与,因为我的时间很...

古乙丁三雨 ⋅ 26分钟前 ⋅ 0

nginx开启gzip压缩JS文件失败?

检查下GZIP设置的压缩的文件类型有没有application/x-javascript,在服务器在传送JavaScript文件时使用的MIME类型通常是这个.

hang1989 ⋅ 26分钟前 ⋅ 0

DockOne微信分享(一二九):聊聊Service Mesh:linkerd

【编者的话】随着企业逐渐将传统的单体应用向微服务或云原生应用的转变,虽然微服务或者云原生应用能给企业带来更多的好处,但也会带来一些具有挑战的问题,如怎么管理从单体应用转向微服务所...

xiaomin0322 ⋅ 31分钟前 ⋅ 0

linear regression

今天分享一个很经典的ML算法---LIner regression(线性回归) **线性回归(Linear regression)**是利用称为线性回归方程的最小二乘函数对一个或多个自变量和因变量之间关系进行建模的一种回归...

gfjjfuy112 ⋅ 33分钟前 ⋅ 0

百度地图使用经验-第1集:成功展现第1个地图

第1步:引入js(携带密钥) 第2步: 创建一个div 第3步: 写js 类: js自己的面向对象的特点; ES6 PHP,JAVA,C++ 插曲:事件 22小时前 事件和函数的区别: 函数是事先写好函数体,手工调用。...

宁哥实战课堂 ⋅ 35分钟前 ⋅ 0

sudo java : command not found

运行sudo java报错 $ sudo java$ sudo: java:找不到命令 解决方案: sudo命令后加-E,保留用户运行环境的环境变量。 sudo -E env PATH=$PATH java...

勇敢的飞石 ⋅ 38分钟前 ⋅ 0

ecs修改主机名称

https://help.aliyun.com/knowledge_detail/41305.html

张宏亮1982 ⋅ 39分钟前 ⋅ 0

扩展JS validate

if ($.validator) { //验证手机号码 $.validator.addMethod("phone", function (value, element, params) { return /^(1)[0-9]{10}$/.test(value); }, "请输入有效的......

熊猫你好 ⋅ 41分钟前 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部