Tuniao UI Uniapp V3TnLazyLoad-懒加载
懒加载可以将页面上的图片延迟加载，减少页面的加载时间，提升用户体验
组件位置
typescript
import TnLazyLoad from '@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load.vue'import TnLazyLoad from '@tuniao/tnui-vue3-uniapp/components/lazy-load/src/lazy-load.vue'typescript
import TnLazyLoad from '@/uni_modules/tuniaoui-vue3/components/lazy-load/src/lazy-load.vue'import TnLazyLoad from '@/uni_modules/tuniaoui-vue3/components/lazy-load/src/lazy-load.vue'平台差异说明
| App(vue) | H5 | 微信小程序 | 支付宝小程序 | ... |
|---|---|---|---|---|
| √ | √ | √ | √ | 适配中 |
注意
由于 uni-app 默认给 image 组件的height为225px，同时将uni-app``image组件的mode参数设置为widthFix时，image才会自动计算出一个高度值覆盖默认的height(225px)。其他mode参数下，如果设置height为auto，或者100%的话，图片将会无法显示。
所以：当您使用TuniaoUI的 lazyload 组件时，如果设置height参数为auto，或者100%，而mode参数又不为widthFix的话，图片将会不显示，这不是TuniaoUI的 BUG。
结论：如果mode参数不为widthFix的话，必须设置height参数为一个固定的高度(单位 rpx)或者包裹TnLazyLoad组件的父容器存在宽高信息，否则无效。
基础使用
- 通过
src传递图片的路径
vue
<template>
<view class="demo-container">
<view v-for="i in 30" :key="i" class="demo-image-container">
<TnLazyLoad
src="https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg"
/>
</view>
</view>
</template><template>
<view class="demo-container">
<view v-for="i in 30" :key="i" class="demo-image-container">
<TnLazyLoad
src="https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg"
/>
</view>
</view>
</template>修改图片的宽高和模式
在默认的情况下组件会根据父容器的宽高来设置图片的宽高，当然开发中也可以通过width和height属性去设置图片的宽高，默认单位为 rpx，可以传入带单位的尺寸值
通过mode属性去设置图片的模式，默认为aspectFill，具体有效值看uniapp 官方文档
vue
<template>
<view class="demo-container">
<view v-for="i in 30" :key="i" class="demo-image-container">
<TnLazyLoad
src="https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg"
width="350rpx"
height="450rpx"
/>
</view>
</view>
</template><template>
<view class="demo-container">
<view v-for="i in 30" :key="i" class="demo-image-container">
<TnLazyLoad
src="https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg"
width="350rpx"
height="450rpx"
/>
</view>
</view>
</template>修改图片加载位置
可以通过 threshold 参数设置图片距离屏幕底部多少距离时触发图片加载，单位 px，说明：
- 如果取负值(如-300)，为尚未到达屏幕底部，距离 300px 时触发
- 如果取正数(如 300)，为图片超出屏幕底部 300px 时触发
图片超过屏幕底部 300px 时触发
vue
<template>
<view class="demo-container">
<view v-for="i in 30" :key="i" class="demo-image-container">
<TnLazyLoad
src="https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg"
:threshold="300"
/>
</view>
</view>
</template><template>
<view class="demo-container">
<view v-for="i in 30" :key="i" class="demo-image-container">
<TnLazyLoad
src="https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg"
:threshold="300"
/>
</view>
</view>
</template>距离屏幕底部还有 300px 时触发
vue
<template>
<view class="demo-container">
<view v-for="i in 30" :key="i" class="demo-image-container">
<TnLazyLoad
src="https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg"
:threshold="-300"
/>
</view>
</view>
</template><template>
<view class="demo-container">
<view v-for="i in 30" :key="i" class="demo-image-container">
<TnLazyLoad
src="https://tnuiimage.tnkjapp.com/uniapp_market/circle/3-image.jpg"
:threshold="-300"
/>
</view>
</view>
</template>API
Props
| 属性名 | 说明 | 类型 | 默认值 | 可选值 |
|---|---|---|---|---|
| src | 图片地址 | String | - | - |
| height | 图片的高度，默认单位为 rpx，可以传入带单位的尺寸值 | String | - | - |
| width | 图片的宽度，默认单位为 rpx，可以传入带单位的尺寸值 | String | - | - |
| mode | 图片的裁剪模式 | String | aspectFill | scaleToFill / aspectFit / aspectFit / widthFix / heightFix / top / bottom / center / left / right / top left / top right / bottom left / bottom right |
| threshold | 开始加载图片的位置，单位为 px，如果设置为负数表示距离底部还有多少个像素就开始加载 | Number | 100 | - |
| transition | 是否开启过度效果，开启后图片显示的时候会有一个渐变的出场效果 | Boolean | true | false |
Emits
| 事件名 | 说明 | 类型 |
|---|---|---|
| loaded | 图片加载完成 | () => void |
| error | 图片加载失败 | () => void |
Slots
| 插槽名 | 说明 |
|---|---|
| loading | 自定义加载中的内容 |
| error | 自定义加载出错的内容 |