# tui-lazyload-img 图片懒加载会员组件

介绍

图片懒加载：如果图片高度设置为auto，mode值需要设置为widthFix。

提示

H5端如果出现 Uncaught TypeError: Cannot read property 'bottom' of null 等错误，暂时建议将 disconnect 属性设为true。

# 引入

# uni-app引入

第一种，手动引入（可全局引入）

import tuiLazyloadImg from "@/components/thorui/tui-lazyload-img/tui-lazyload-img.vue"
export default {
	components:{
		tuiLazyloadImg
	}
}

第二种，开启easycom组件模式，如果不了解如何配置，可先查看官网文档 (opens new window)。

# uni-app版本平台差异说明

App-Nvue	App-vue	H5	微信小程序	支付宝小程序	百度小程序	字节小程序	QQ小程序
升级中	✓	✓	✓	✓	✓	✓	✓

# 微信小程序引入（可在app.json中全局引入）

{
  "usingComponents": {
    "tui-lazyload-img": "/components/thorui/tui-lazyload-img/tui-lazyload-img"
  }
}

# 代码演示

部分功能演示，具体可参考示例程序以及文档API。

基础使用

通过 width 属性设置图片宽度，通过 height 属性设置图片高度。

<!--uni-app-->
<tui-lazyload-img width="100%" height="370rpx" :src="entity.img || ''"></tui-lazyload-img>

<!--微信小程序-->
<tui-lazyload-img width="100%" height="370rpx" src="{{entity.img || ''}}"></tui-lazyload-img>

# Slots

插槽名称	说明
default	内容使用absolute定位，覆盖在图片上方

# Props

属性名	类型	说明	默认值
src	String	图片路径	-
placeholder	String	占位图路径	-
backgroundColor	String	占位背景色，placeholder有值时失效	#E7E7E7
mode	String	图片的裁剪模式，参考image组件mode属性	widthFix
fadeShow	Boolean	图片显示动画效果,无占位图时有效	true
webp	Boolean	默认不解析 webP 格式，只支持网络资源微信小程序2.9.0	false
showMenuByLongpress	Boolean	开启长按图片显示识别小程序码菜单微信小程序2.7.0	false
draggable	Boolean	鼠标长按是否能拖动图片仅H5平台 3.1.1+ 有效	true
width	String	图片宽度	340rpx
height	String	图片高度，如果高度设置为auto，mode值需要设置为widthFix	340rpx
radius	String	图片圆角值，如：10rpx	0
bottom	[Number, String]	节点布局区域的下边界,目标节点区域以下 bottom（px）时，就会触发回调函数	50
disconnect	Boolean	是否停止监听，设置为true时取消懒加载	false
index	Number	图片在列表中的索引值	0

# Events

注：uni-app端绑定事件使用@前缀，如@click；微信小程序原生使用bind前缀，如bindclick

事件名	说明	回调参数
click	点击图片时触发	{index: Number}
load	图片加载完成时触发	{index: Number,detail:e.detail}
error	图片加载失败时触发	{index: Number,detail:e.detail}