0
点赞
收藏
分享

微信扫一扫

centOS 安装MySQL8.0

归零者245号 1天前 阅读 0

此组件为uni-app的image组件的加强版,在继承了原有功能外,还支持淡入动画、加载中、加载失败提示、圆角值和形状等。
我们推荐您在任何使用图片场景的地方,都优先考虑使用这个小巧,精致而实用的组件。

注意:

由于在nvue下,u-image名称被uni-app官方占用,在nvue页面中请使用u--image名称,在vue页面中使用u--image或者u-image均可。

#平台差异说明

App(vue)App(nvue)H5小程序

#基本使用

配置图片的width宽和height高,以及src路径即可使用。

<template>
	<u--image :showLoading="true" :src="src" width="80px" height="80px" @click="click"></u--image>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg'
			}
		}
	}
</script>

copy

#裁剪模式

通过mode参数配置填充模式,此模式用法与uni-app的image组件的mode参数完全一致,详见:Image(opens new window)

<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" mode="widthFix"></u--image>

copy

#图片形状

  • 通过shape参数设置图片的形状,circle为圆形,square为方形
  • 如果为方形时,还可以通过radius属性设置圆角值
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" shape="circle"></u--image>

copy

#懒加载

注意:此功能只对微信小程序、App、百度小程序、字节跳动小程序有效,默认开启。

<u-image src="https://cdn.uviewui.com/uview/album/1.jpg" :lazy-load="true"></u-image>

copy

#加载中提示

图片加载过程中,为加载中状态(默认显示一个小图标),可以通过loading自定义插槽,结合uView的u-loading组件,实现加载的动画效果。

<u--image src="https://cdn.uviewui.com/uview/album/1.jpg">
  <template v-slot:loading>
    <u-loading-icon color="red"></u-loading-icon>
  </template>
</u--image>

copy

#加载错误提示

图片加载失败时,默认显示一个错误提示图标,可以通过error自定义插槽,实现个性化的提示方式。

<u--image src="https://cdn.uviewui.com/uview/album/1.jpg">
	<view slot="error" style="font-size: 24rpx;">加载失败</view>
</u--image>

copy

#淡入动画

组件自带了加载完成时的淡入动画效果:

  • 通过fade参数配置是否开启动画效果
  • 通过duration参数配置动画的过渡时间,单位ms
<u--image src="https://cdn.uviewui.com/uview/album/1.jpg" :fade="true" duration="450"></u--image>

copy

#事件冒泡

默认情况下,组件是允许内部向外事件冒泡的,因为很多情况下,我们都希望点击图片,同时图片所在的父元素的点击事件也能触发。
如果您想避免事件冒泡,那么您可以在组件外面嵌套一个view,同时给它加上@tap.stop即可。

<!-- 点击图片将不会触发clickHandler -->
<view @tap="clickHandler">
	<view @tap.stop>
		<u--image src="https://cdn.uviewui.com/uview/album/1.jpg"></u--image>
	</view>
</view>
举报

相关推荐

centos8安装mysql8.0

Docker 安装 MySQL8.0

Docker安装MySQL8.0

Mysql8.0安装指南

MySQL8.0安装问题

0 条评论