做网站的是什么软件,html5网站设计欣赏,外贸网站程序,推广引流哪个软件最好当在UniApp中使用图片时#xff0c;可以通过image标签将图片显示在页面上。这个标签可以指定src属性来引用图片#xff0c;并且可以通过mode属性来设置图片的显示模式。除此之外#xff0c;还可以利用click事件来实现图片的点击事件。在编写代码时#xff0c;要注意…
当在UniApp中使用图片时可以通过image标签将图片显示在页面上。这个标签可以指定src属性来引用图片并且可以通过mode属性来设置图片的显示模式。除此之外还可以利用click事件来实现图片的点击事件。在编写代码时要注意引用图片的路径和处理图片的点击事件以及适配不同屏幕尺寸的情况。UniApp中的图片使用相对简单下面的博客将详细介绍UniApp中图片的使用方法以及相关注意事项。
基本使用
templateu--image :showLoadingtrue :srcsrc width80px height80px clickclick/u--image
/templatescriptexport default {data() {return {src: https://cdn.uviewui.com/uview/album/1.jpg}}}
/script
剪切模式:
u--image srchttps://cdn.uviewui.com/uview/album/1.jpg modewidthFix/u--image图片形状:
通过shape参数设置图片的形状circle为圆形square为方形如果为方形时还可以通过radius属性设置圆角值
u--image srchttps://cdn.uviewui.com/uview/album/1.jpg shapecircle/u--image懒加载
注意此功能只对微信小程序、App、百度小程序、字节跳动小程序有效默认开启。
u-image srchttps://cdn.uviewui.com/uview/album/1.jpg :lazy-loadtrue/u-image加载中提示
图片加载过程中为加载中状态(默认显示一个小图标)可以通过loading自定义插槽结合uView的u-loading组件实现加载的动画效果。
u--image srchttps://cdn.uviewui.com/uview/album/1.jpgtemplate v-slot:loadingu-loading-icon colorred/u-loading-icon/template
/u--image加载错误提示
图片加载失败时默认显示一个错误提示图标可以通过error自定义插槽实现个性化的提示方式。
u--image srchttps://cdn.uviewui.com/uview/album/1.jpgview sloterror stylefont-size: 24rpx;加载失败/view
/u--image淡入动画
组件自带了加载完成时的淡入动画效果
通过fade参数配置是否开启动画效果通过duration参数配置动画的过渡时间单位ms
u--image srchttps://cdn.uviewui.com/uview/album/1.jpg :fadetrue duration450/u--image事件冒泡
默认情况下组件是允许内部向外事件冒泡的因为很多情况下我们都希望点击图片同时图片所在的父元素的点击事件也能触发。 如果您想避免事件冒泡那么您可以在组件外面嵌套一个view同时给它加上tap.stop即可。
!-- 点击图片将不会触发clickHandler --
view tapclickHandlerview tap.stopu--image srchttps://cdn.uviewui.com/uview/album/1.jpg/u--image/view
/view参数说明类型默认值可选值src图片地址强烈建议使用绝对或者网络路径String--mode裁剪模式见上方说明StringaspectFill-width宽度单位任意如果为数值默认单位pxString | Number300-height高度单位任意如果为数值默认单位pxString | Number225-shape图片形状circle-圆形square-方形Stringsquaresquareradius圆角默认单位pxString | Number0-lazyLoad是否懒加载仅微信小程序、App、百度小程序、字节跳动小程序有效Booleantrue-showMenuByLongpress是否开启长按图片显示识别小程序码菜单仅微信小程序有效Booleantrue-loadingIcon加载中的图标或者小图片Stringphoto-errorIcon加载失败的图标或者小图片Stringerror-circle-showLoading是否显示加载中的图标或者自定义的slotBooleantruefalseshowError是否显示加载错误的图标或者自定义的slotBooleantruefalsefade是否需要淡入效果Booleantruefalsewebp只支持网络资源只对微信小程序有效Booleanfalsetrueduration搭配fade参数的过渡时间单位msString | Number500-bgColor背景颜色用于深色页面加载图片时为了和背景色融合String#f3f4f6-
#Slot
名称说明loading自定义加载中的提示内容error自定义失败的提示内容
#CellItem Events
事件名说明回调参数click点击图片时触发-error图片加载失败时触发err: 错误信息load图片加载成功时触发-
