微信小程序 Image组件实例详解

2024-03-23 12:06:07

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"/>

相关文章：

hello WeApp                    icon组件
Window                            text组件                                switch组件
tabBar底部导航               progress组件                        action-sheet
应用生命周期                    button组件                            modal组件
页面生命周期                    checkbox组件                      toast组件
模块化详                     form组件详                     loading 组件
数据绑定                           input 组件                             navigator 组件
View组件                         picker组件                            audio 组件
scroll-view组件                 radio组件                        video组件
swiper组件                       slider组件                            Image组件

微信小程序（十四）button组件详细介绍

button按钮用的算是最普遍的组件之一. 主要属性: wxml  <button type="defaule" bindtap="clickButton">Defalut</button>  <button type="primary" disabled="true" loading=
微信小程序 loading 组件实例详解

loading通常使用在请求网络数据时的一种方式,通过hidden属性设置显示与否主要属性: wxml  <button type="primary" bindtap="listenerButton">显示loading</button>  <loading hidden="{{hiddenLoading}}">正在加载</loading>
微信小程序（十一）icon组件详细介绍

这些是提供的所支持的图标样式,根据需求在此基础上去修改大小和颜色. 主要属性: 使用方式: wxml  <icon type="success" size="40"/>  <icon type="safe_success" size="40"/>  <icon type="i
微信小程序（九）scroll-view组件详细介绍

scroll-view为滚动视图,分为水平滚动和垂直滚动.注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效.滚动视图常用的地方一般都是Item项比较多的界面,比如我的模块主要属性: 使用演示: wxml  <scroll-view scroll-y="true" style="height: 200px"> <view style="background: r
微信小程序 Button 组件详解及简单实例

微信小程序 Button 相关文章: 微信小程序 Button 微信小程序 radio 微信小程序 slider 微信小程序 switch 微信小程序 textarea 微信小程序 picker-view 微信小程序 picker 微信小程序 label 微信小程序 input 微信小程序 form 微信小程序 checkbox 实现实例效果图: 属性名类型默认值说明 size String default 有效值default, mini type String default 按钮的样
微信小程序 swiper组件轮播图详解及实例

微信小程序 swiper组件轮播图照着开发文档尝试,总是能有所收获.之前做Android开发,做个轮播图并不简单,用上viewpage再设置圆点,折腾一通之后还一堆bug.今天尝试微信小程序开发做轮播图,真是感动的泪流满面.废话说完了,上图. 上图就是一个简易的轮播图,是不是很简易.23333 主要是代码也很简单. 1.index.wxml  <swiper class="swiper" indicator-dots="t
微信小程序倒计时组件实现代码

功能: 适用于电商应用的限时团购.商品秒杀等先来看下最终效果: git源:http://git.oschina.net/dotton/CountDown 分步骤-性子急的朋友,可以直接看最后那段代码. wxml文件放个text <text>second: {{second}} micro second:{{micro_second}}</text> 在js文件中调用 function countdown(that) { var second = that.data.second
微信小程序（十）swiper组件详细介绍

Android写过轮播图的痛楚只有写过的知道,相对还是比较麻烦的,并没有一个轮播图组件,有个ViewPage也需要自己定制,IOS则多用UIScrollerView去实现,这个swiper封装的相对还是方便的,使用方式也相对那俩容易些. 主要属性: 属性只需要设置就行了也可以抽到js文件的data中进行数据绑定,监听使用bindchange,在js中做业务处理. wxml  <swiper indicator-dot
微信小程序 (十七)input 组件详细介绍

input输入框使用的频率也是比较高的...样式的话自己外面包裹个view自己定义.input属性也不是很多,有需要自己慢慢测,尝试主要属性: wxml  <view class="inputView" style="margin-top: 40% "> <input class="input" type="number"
微信小程序媒体组件详解（视频，音乐，图片）

今天主要是简单的讲一下小程序当中的媒体组件,媒体组件包括:视频,音乐,图片等. 先来看看效果图: 1.图片Image <!-- scaleToFill:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 widthFix:宽度不变,高度自动变化,保持原图宽高比不变 aspectFill:保持纵横比缩放图片,只保证图片的短边能完全显示出来. 也就是说,图片通常只在水平或垂直方向是完整的,另一个方向将会发生截取. aspectFit: 保持纵横比缩放图片,使图片的长边能完全显示出来.

微信小程序 Image组件实例详解

相关推荐

随机推荐