uniapp如何实现图片懒加载？

image有个属性lazy-load，默认是false，开启后就能实现。

图片懒加载只针对 pa...

点击查看剩余70%

也可以自己写一个懒加载图片组件lazyload.vue

<template>
	<view class="lazy-content" :style="{
			width,
			height,
		}">
		<!-- 加载中 -->
		<image :src="loadSrc" class="lazy-image lazy-load" @load="init"  mode="aspectFill" :style="{
				opacity:isShow?'0':'1',
				borderRadius,
				width,
				height,
				transition: `opacity ${duration/1000}s ${effect}`
				}"></image>
				
		<!-- 加载成功 -->
		<image class="lazy-image" @load="load" @error="error" v-if="status==1" :src="src" mode="aspectFill" :style="{
				opacity:isShow?'1':'0',
				borderRadius,
				width,
				height,
				transition: `opacity ${duration/1000}s ${effect}`
				}">
		</image>
		<!-- 加载失败 -->
		<image class="lazy-image" v-if="status==2" :src="errorSrc" mode="aspectFill" :style="{
			opacity:isShow?'1':'0',
			borderRadius,
			width,
			height,
			transition: `opacity ${duration/1000}s ${effect}`
			}">
		</image>
		
	</view>
</template>

<script>
	let loadTimer = null
	import loadingImage from "../static/images/avatar.png"
	import loadFailImage from '../static/images/avatar.png'
	/**
	 * 懒加载插件
	 * @description 懒加载插件
	 *
	 * @property {String}			borderRadius		图片圆角,必须带尺寸单位
	 * @property {String}			width				图片宽度,必须带尺寸单位(默认100%)
	 * @property {String}			height				图片高度,必须带尺寸单位(默认100%)
	 * @property {String}			src					图片链接,不传的话会一直是加载中状态
	 * @property {String|Number}	minTimeOut			当图片加载过快(存在缓存)至少显示多少秒加载动画
	 * @property {String} 			effect = [linear|ease|ease-in|ease-out|ease-in-out] 过渡效果,可以用cubic-bezier
	 * 	@value linear 		规定以相同速度开始至结束的过渡效果(默认)
	 * 	@value ease  		规定慢速开始,然后变快,然后慢速结束的过渡效果
	 * 	@value ease-in 		规定以慢速开始的过渡效果
	 * 	@value ease-out		规定以慢速结束的过渡效果
	 * 	@value ease-in-out  规定以慢速开始和结束的过渡效果
	 * @property {String|Number}			duration	图片加载成功后的过渡时间,单位毫秒
	 * @property {Object}			showDistance		 当图片到屏幕哪个位置的时候开始加载,单位px,可以是负数 (默认{bottom:0})
	 * @property {String}			loadSrc				加载中显示的图片，输入网络路径或绝对路径
	 * @property {String}			errorSrc			加载失败显示的图片，输入网络路径或绝对路径
	 * @event {Function} show 当图片进入页面触发
	 * @event {Function} showSuccess 当图片完全加载完毕触发
	 * @example <lazy-lazyLoad :src="src" width="100rpx" height="100rpx"></lazy-lazyLoad>
	 */

	export default {
		name: "lazyLoad",
		props: {
			//图片圆角 必须带尺寸单位
			borderRadius: {
				type: String,
				default: '0'
			},
			//图片宽度
			width: {
				type: Strin...

点击查看剩余70%