返回介绍

开发指南

组件

JS

模板

LazyLoad 懒加载

发布于 2021-04-03 05:35:23 字数 5059 浏览 928 评论 0 收藏 0

LazyLoad 懒加载 平台差异说明
AppH5微信小程序支付宝小程序百度小程序头条小程序QQ小程序

基本使用

通过image参数传入图片的src路径即可

注意

由于uni-app认给了image组件的height为225px,同时也只uni-appimage组件的mode参数为widthFix时,image才会自动计算出一个高度值 覆盖默认的height(225px)。其他mode参数下,如果设置heightauto,或者100%的话,图片将会无法显示。

所以:当您使用uView的lazyload组件时,如果设置height参数为auto,或者100%,而img-mode参数又不为widthFix的话,图片将会不显示,这不是uView的BUG。

结论:如果img-mode参数不为widthFix的话,必须设置height参数为一个固定的高度(单位rpx),否则无效。

<template>
	<view>
		<u-lazy-load v-for="(item, index) in list" :key="index" :image="item.src"></u-lazy-load>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				// 设计成数组内嵌对象而不是纯数组形式,是考虑到真实环境后端返回的数据为如此形式
				list: [{
						src: "https://www.wenjiangs.com/wp-content/uploads/2021/docimg5/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						src: "https://www.wenjiangs.com/wp-content/uploads/2021/docimg5/TB1IWtgQFXXXXcmXFXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						src: "https://www.wenjiangs.com/wp-content/uploads/2021/docimg5/TB1_f_PLXXXXXbVXpXXSutbFXXX.jpg_240x240xz.jpg",
					},
					{
						// 这里图片不存在,会加载失败,显示错误的占位图
						src: "xxx",
					},
				]
			}
		}
	}
</script>

配置占位图

占位图有两种情况:

  • 一种是正常预加载时显示的,通过loading-img配置类似"正在加载"的占位图。
  • 另一种是图片加载失败(如图片不存在,路径不完整等),通过error-img参数配置类似"图片加载错误"的占位图
<template>
	<view>
		<u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				image: "https://www.wenjiangs.com/wp-content/uploads/2021/docimg5/TB124_3NXXXXXasXVXXSutbFXXX.jpg_240x240xz.jpg",
				loadingImg: '/static/uView/loading.png',
				errorImg: '/static/uView/load_error.png'
			}
		}
	}
</script>

图片加载位置

可以通过threshold参数设置图片距离屏幕底部多少距离时触发图片加载,单位rpx,说明:

  • 如果取负值(如-300),为尚未到达屏幕底部,距离300rpx时触发
  • 如果取正数(如300),为图片超出屏幕底部300rpx时触发
<u-lazy-load :image="image" threshold="300"></u-lazy-load>

API

Props

参数说明类型默认值可选值
index用户自定义值,在事件触发时回调,用以区分是哪个图片String | Number--
image图片路径String--
loading-img预加载时的占位图String--
error-img图片加载出错时的占位图String--
threshold触发加载时的位置,见上方说明,单位 rpxString100-
duration图片加载成功时,淡入淡出时间,单位msString | Number500-
effect图片加载成功时,淡入淡出的css动画效果Stringease-in-outlinear / ease / ease-in / ease-out
is-effect图片加载成功时,是否启用淡入淡出效果Booleantruefalse
border-radius图片圆角值,单位rpxString | Number0-
height图片高度,注意:实际高度可能受img-mode参数影响String | Number450-
img-mode图片的裁剪模式,详见image组件裁剪模式String | NumberwidthFix-

Events

事件名说明回调参数版本
click点击图片时触发index:用户通过props传递的index-
load图片加载成功时触发index:用户通过props传递的index-
error图片加载失败时触发index:用户通过props传递的index-

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文