# 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"
export default {
	components:{
		tuiLazyloadImg
	}
}

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

# 微信小程序引入(可在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

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

# 预览

请以移动端效果为准,touch事件目前尚未在PC端做兼容。

# 线上程序扫码预览

ThorUI组件库 H5二维码 ThorUI示例
ThorUI组件库小程序码 H5二维码 ThorUI示例小程序码