From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目

---
 uview-ui/components/u-lazy-load/u-lazy-load.vue |  244 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 244 insertions(+), 0 deletions(-)

diff --git a/uview-ui/components/u-lazy-load/u-lazy-load.vue b/uview-ui/components/u-lazy-load/u-lazy-load.vue
new file mode 100644
index 0000000..429a680
--- /dev/null
+++ b/uview-ui/components/u-lazy-load/u-lazy-load.vue
@@ -0,0 +1,244 @@
+<template>
+	<view class="u-wrap" :style="{
+			  opacity: Number(opacity),
+			  borderRadius: borderRadius + 'rpx',
+			  // 鍥犱负time鍊奸渶瑕佹敼鍙�,鎵�浠ヤ笉鐩存帴鐢╠uration鍊�(涓嶈兘鏀瑰彉鐖剁粍浠秔rop浼犺繃鏉ョ殑鍊�)
+			  transition: `opacity ${time / 1000}s ease-in-out`
+		   }"
+	 :class="'u-lazy-item-' + elIndex">
+		<view :class="'u-lazy-item-' + elIndex">
+			<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" v-if="!isError" class="u-lazy-item"
+			 :src="isShow ? image : loadingImg" :mode="imgMode" @load="imgLoaded" @error="loadError" @tap="clickImg"></image>
+			<image :style="{borderRadius: borderRadius + 'rpx', height: imgHeight}" class="u-lazy-item error" v-else :src="errorImg"
+			 :mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image>
+		</view>
+	</view>
+</template>
+
+<script>
+	/**
+	 * lazyLoad 鎳掑姞杞�
+	 * @description 鎳掑姞杞戒娇鐢ㄧ殑鍦烘櫙涓猴細椤甸潰鏈夊緢澶氬浘鐗囨椂锛孉PP浼氬悓鏃跺姞杞芥墍鏈夌殑鍥剧墖锛屽鑷撮〉闈㈠崱椤匡紝鍚勪釜浣嶇疆鐨勫浘鐗囧嚭鐜板墠鍚庝笉涓�鑷寸瓑.
+	 * @tutorial https://www.uviewui.com/components/lazyLoad.html
+	 * @property {String Number} index 鐢ㄦ埛鑷畾涔夊�硷紝鍦ㄤ簨浠惰Е鍙戞椂鍥炶皟锛岀敤浠ュ尯鍒嗘槸鍝釜鍥剧墖
+	 * @property {String} image 鍥剧墖璺緞
+	 * @property {String} loading-img 棰勫姞杞芥椂鐨勫崰浣嶅浘
+	 * @property {String} error-img 鍥剧墖鍔犺浇鍑洪敊鏃剁殑鍗犱綅鍥�
+	 * @property {String} threshold 瑙﹀彂鍔犺浇鏃剁殑浣嶇疆锛岃涓婃柟璇存槑锛屽崟浣� rpx锛堥粯璁�300锛�
+	 * @property {String Number} duration 鍥剧墖鍔犺浇鎴愬姛鏃讹紝娣″叆娣″嚭鏃堕棿锛屽崟浣峬s锛堥粯璁わ級
+	 * @property {String} effect 鍥剧墖鍔犺浇鎴愬姛鏃讹紝娣″叆娣″嚭鐨刢ss鍔ㄧ敾鏁堟灉锛堥粯璁ase-in-out锛�
+	 * @property {Boolean} is-effect 鍥剧墖鍔犺浇鎴愬姛鏃讹紝鏄惁鍚敤娣″叆娣″嚭鏁堟灉锛堥粯璁rue锛�
+	 * @property {String Number} border-radius 鍥剧墖鍦嗚鍊硷紝鍗曚綅rpx锛堥粯璁�0锛�
+	 * @property {String Number} height 鍥剧墖楂樺害锛屾敞鎰忥細瀹為檯楂樺害鍙兘鍙梚mg-mode鍙傛暟褰卞搷锛堥粯璁�450锛�
+	 * @property {String Number} mg-mode 鍥剧墖鐨勮鍓ā寮忥紝璇﹁image缁勪欢瑁佸壀妯″紡锛堥粯璁idthFix锛�
+	 * @event {Function} click 鐐瑰嚮鍥剧墖鏃惰Е鍙�
+	 * @event {Function} load 鍥剧墖鍔犺浇鎴愬姛鏃惰Е鍙�
+	 * @event {Function} error 鍥剧墖鍔犺浇澶辫触鏃惰Е鍙�
+	 * @example <u-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></u-lazy-load>
+	 */
+	export default {
+		name: 'u-lazy-load',
+		props: {
+			index: {
+				type: [Number, String]
+			},
+			// 瑕佹樉绀虹殑鍥剧墖
+			image: {
+				type: String,
+				default: ''
+			},
+			// 鍥剧墖瑁佸壀妯″紡
+			imgMode: {
+				type: String,
+				default: 'widthFix'
+			},
+			// 鍗犱綅鍥剧墖璺緞
+			loadingImg: {
+				type: String,
+				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OUM0QjNBQjkyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OUM0QjNBQkEyQUQ2MTFFQTlCNUQ4RTIzNDE5RUIxNjciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5QzRCM0FCNzJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo5QzRCM0FCODJBRDYxMUVBOUI1RDhFMjM0MTlFQjE2NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtRHfPcAAAAzUExURZWVldfX18PDw62trZubm9zc3Li4uKGhoebm5tLS0uHh4c3Nzaenp729vcjIyLKysuvr6141L40AAAcXSURBVHja7NzZlqpGAEBR5lG0//9rIw7IJKJi4or7PGTdtN10wr5SVAEGf/qqArsAiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAIiIAAERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAgAgJEQIAICBABERAg+nmQFMi5Jis+sIniED23jSzIgLTtg2D//iYme/8QBM/9lQ+CAEhbNLM3N9hEHAThX7GPCiBfAxK1b51kD+R7QMLjXg7iCsgWIPUh7pfVozG791oeBPngm48G583uW5GkBvI+SBaM2xXDn1oqum423bX/mgF5FySc2cv93Voug9TdZotsggnkBZB2NzbhrSY5HnoG07jei8dvzsJB/c3W60SALILE46+WCztsbhPR7R2VJq0ukEcT49nyy8QhaKcRa3fYHZD4+ufqOJAcgDz8/59vtw1I3QP5K6JsOG0vm3hce4I8LQp/BaRZGJC3AAn7IKOKXbC+7EdA5vdmmVwOLksgRThqOqiH4XEGsht+peoPUE8U/jJIO5OLH4GEwUslV5G0PTBG5Uiw/Y2jyigO3l9HAHKv9PYb82LloH74dZBoBUgar+l48NsNvtD0fkez9iwrAvIYZDRCl+Xs149Hm/KZmQ+QjUCiO1ei4ru7EsgnQYrkznlQb7thCuRfAzlOAPN72427P4VA/i2Q/DKT/Ls/VR8fvIBsDZIuz7TPF6TCbnk4GJkB2RokejTjuE7/unlgCuSTIO0Cy+Plp6vDfnQlBchy8QtjSHVd3EgmK1bHLm+H6+nXYbz2DuQRSPnqoL7vvq0u70on4zvxgCyWD3b9UyDVdW24PaWaiGTnFZJwPIQAebDpIKheBIm7n124ZthMJipAlkqHO+IZkP1tbfzOJark/A7MgKyvvl60fRqkvXfhuow+t9+q00+0/yyBrK8ZngOtBzldhw2X9tvpNGty0gvkmbPeJ0Cy/r09s/stbmfo0yMWkEdjevgKyOn2t2pxv7UXoibTdCDLje9/Ww1ymqzn87dbp92242ZmMRjI8hASvwKSLq4udqN6ksw8nxXN3tszD9L8Gkg+2mFrQYql5az4tvFj5xOx4VwnSdeBtGdyPwUytxK77pBVlNHdO7OK3rh/eTPUvdutT3fO52tuHMqD4N7llv8pyOQQ//w19YVDfX27+Sfuby9/6nau4pdA8vEdOZuChEH/quHt0Jg+IRJ/5+PrHwKZXfjbDiS73Zo7mu5UkzX7uTsXe0e/7nC3ePf1O69+BUg2XDfZCqSqOu7rGVf8cHBe8zhC2b61dtUHXv0OkGo6ZL4JkpbRYXdUaFevivx2M/1GIOctNh949TtAoumQ+TpIHMX54CJu+8BDd8FkE5BqcZh/59XvAClmTvKfB0nDqIlHo3T70SftyW1eX9dXtgQJqs1f/Q6QaOa/7wmQKtxH8eiGoCRuovODIO3VxOMmruZbHrLyD7z6DSDtGyT7ew1kf9hNn07c986JTovzzem0Id9wUG+Vk/IDr34DSNR7huZJkMFT6vEhqrPx/j5cnlZML8N6/PAzh9Y99Flm5Yde/c9BquDOkvkKkMP58dA4qi9vivE8JOvGz/j8FokfPpr288+pH2ZPOZrLmeGD+7KOh6dqYWJ48ki7yUg0tz0go/fv/LLddfV3sgOLJyaGPY/zrSlh1a36Arkzoue9CyG35ze6E6/dzO2Ga0EGHqdRJIkfn9/8OEjTW8Vq91ZWh39FeehWA7Nu9ft8CpUEk1WWOyDF0OPyEU2Pnzf/bZC0P6IPzmAvu7KauQBVrgKpJ0tG2arHzX8e5Pb3PezNs/PrX+3JMyCLn9XXf37tPFHvt09WfCDDjx+yyn1/p1V11j7GnB/q3leLuVva79S/tzed+db08YpF4uOZtmz/9oXWMq6BCAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAERECACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiACAgQAQEiIEAEBIiAALELvqt/BBgACqVeUBXxcCkAAAAASUVORK5CYII='
+			},
+			// 鍔犺浇澶辫触鐨勯敊璇崰浣嶅浘
+			errorImg: {
+				type: String,
+				default: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAAGQCAMAAAC3Ycb+AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODdDMjhENDYyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODdDMjhENDcyQUQ2MTFFQTlDQ0VBODgxQjFFOEEyMEMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo4N0MyOEQ0NDJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo4N0MyOEQ0NTJBRDYxMUVBOUNDRUE4ODFCMUU4QTIwQyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PhLwhikAAAAzUExURZWVldfX162t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'
+			},
+			// 鍥剧墖杩涘叆鍙鍖哄煙鍓嶅灏戝儚绱犳椂锛屽崟浣峳px锛屽紑濮嬪姞杞藉浘鐗�
+			// 璐熸暟涓哄浘鐗囪秴鍑哄睆骞曞簳閮ㄥ灏戣窛绂诲悗瑙﹀彂鎳掑姞杞斤紝姝ｆ暟涓哄浘鐗囬《閮ㄨ窛绂诲睆骞曞簳閮ㄥ灏戣窛绂绘椂瑙﹀彂(鍥剧墖杩樻病鍑虹幇鍦ㄥ睆骞曚笂)
+			threshold: {
+				type: [Number, String],
+				default: 100
+			},
+			// 娣″叆娣″嚭鍔ㄧ敾鐨勮繃娓℃椂闂�
+			duration: {
+				type: [Number, String],
+				default: 500
+			},
+			// 娓℃晥鏋滅殑閫熷害鏇茬嚎锛屽悇涓箣闂村樊鍒笉澶э紝鍥犱负杩欐槸娣″叆娣″嚭锛屼笖鏃堕棿寰堢煭锛屼笉鏄偅浜涘彉褰㈡垨鑰呯Щ鍔ㄧ殑鎯呭喌锛屼細鏄庢樉
+			// linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
+			effect: {
+				type: String,
+				default: 'ease-in-out'
+			},
+			// 鏄惁浣跨敤杩囨浮鏁堟灉
+			isEffect: {
+				type: Boolean,
+				default: true
+			},
+			// 鍦嗚鍊�
+			borderRadius: {
+				type: [Number, String],
+				default: 0
+			},
+			// 鍥剧墖楂樺害锛屽崟浣峳px
+			height: {
+				type: [Number, String],
+				default: '450'
+			}
+		},
+		data() {
+			return {
+				isShow: false,
+				opacity: 1,
+				time: this.duration,
+				loadStatus: '', // 榛樿鏄噿鍔犺浇涓殑鐘舵��
+				isError: false, // 鍥剧墖鍔犺浇澶辫触
+				elIndex: this.$u.guid()
+			}
+		},
+		computed: {
+			// 灏唗hreshold浠巖px杞负px
+			getThreshold() {
+				// 鍏堝彇缁濆鍊硷紝鍥犱负threshold鍙兘鏄礋鏁帮紝鏈�鍚庢牴鎹畉his.threshold鏄鏁版垨鑰呰礋鏁帮紝閲嶆柊杩樺師
+				let thresholdPx = uni.upx2px(Math.abs(this.threshold));
+				return this.threshold < 0 ? -thresholdPx : thresholdPx;
+			},
+			// 璁＄畻鍥剧墖鐨勯珮搴︼紝鍙兘涓篴uto锛屽甫%锛屾垨鑰呯洿鎺ユ暟鍊�
+			imgHeight() {
+				return this.$u.addUnit(this.height);
+			}
+		},
+		created() {
+			// 鐢变簬涓�浜涚壒娈婂師鍥狅紝涓嶈兘灏嗘鍙橀噺鏀惧埌data涓畾涔�
+			this.observer = {};
+		},
+		watch: {
+			isShow(nVal) {
+				// 濡傛灉鏄笉寮�鍚繃娓℃晥鏋滐紝鐩存帴杩斿洖
+				if (!this.isEffect) return;
+				this.time = 0;
+				// 鍘熸潵opacity涓�1(涓嶉�忔槑锛屾槸涓轰簡鏄剧ず鍗犱綅鍥�)锛屾敼鎴�0(閫忔槑锛屾剰鍛崇潃璇ュ厓绱犳樉绀虹殑鏄儗鏅鑹诧紝榛樿鐨勭櫧鑹�)锛屽啀鏀规垚1锛屾槸涓轰簡鑾峰緱杩囨浮鏁堟灉
+				this.opacity = 0;
+				// 寤舵椂30ms锛屽惁鍒欏湪娴忚鍣℉5锛岃繃娓℃晥鏋滄棤鏁�
+				setTimeout(() => {
+					this.time = this.duration;
+					this.opacity = 1;
+				}, 30)
+			},
+			// 鍥剧墖璺緞鍙戠敓鍙樺寲鏃讹紝闇�瑕侀噸鏂版爣璁颁竴浜涘彉閲忥紝鍚﹀垯浼氫竴鐩村崱鍦ㄦ煇涓�涓姸鎬侊紝姣斿isError
+			image(n) {
+				if(!n) {
+					// 濡傛灉浼犲叆null鎴栬��''锛屾垨鑰卽ndefined锛屾爣璁颁负閿欒鐘舵��
+					this.isError = true;
+				} else {
+					this.init();
+					this.isError = false;
+				}
+			}
+		},
+		methods: {
+			// 鐢ㄤ簬閲嶆柊鍒濆鍖�
+			init() {
+				this.isError = false;
+				this.loadStatus = '';
+			},
+			// 鐐瑰嚮鍥剧墖瑙﹀彂鐨勪簨浠�,loadlazy-杩樻槸鎳掑姞杞戒腑鐘舵�侊紝loading-鍥剧墖姝ｅ湪鍔犺浇锛宭oaded-鍥剧墖鍔犲姞杞藉畬鎴�
+			clickImg() {
+				let whichImg = '';
+				// 濡傛灉isShow涓篺alse锛屾剰鍛崇潃鍥剧墖杩樻病寮�濮嬪姞杞斤紝鐐瑰嚮鐨勫彧鑳芥槸鏈�寮�濮嬬殑鍗犱綅鍥�
+				if (this.isShow == false) whichImg = 'lazyImg';
+				// 濡傛灉isError涓簍rue锛屾剰鍛崇潃鍥剧墖鍔犺浇澶辫触锛岃繖鏄彧鍓╀笅閿欒鐨勫崰浣嶅浘锛屾墍浠ョ偣鍑荤殑鍙兘鏄敊璇崰浣嶅浘
+				// 褰撶劧锛屼篃鍙互缁欓敊璇殑鍗犱綅鍥惧厓绱犵粦瀹氱偣鍑讳簨浠讹紝鐪嬩綘鍠滄~
+				else if (this.isError == true) whichImg = 'errorImg';
+				// 鎬诲叡涓夊紶鍥剧墖锛岄櫎浜嗕袱涓崰浣嶅浘锛屽墿涓嬬殑鍙兘鏄甯哥殑閭ｅ紶鍥剧墖浜�
+				else whichImg = 'realImg';
+				// 鍙�氱煡褰撳墠鍥剧墖鐨刬ndex
+				this.$emit('click', this.index);
+			},
+			// 鍥剧墖鍔犺浇瀹屾垚浜嬩欢锛屽彲鑳芥槸鍔犺浇鍗犱綅鍥炬椂瑙﹀彂锛屼篃鍙兘鏄姞杞界湡姝ｇ殑鍥剧墖瀹屾垚鏃惰Е鍙戯紝閫氳繃isShow鍖哄垎
+			imgLoaded() {
+				// 鍗犱綅鍥惧姞杞藉畬鎴�
+				if (this.loadStatus == '') {
+					this.loadStatus = 'lazyed';
+				}
+				// 鐪熸鐨勫浘鐗囧姞杞藉畬鎴� 
+				else if (this.loadStatus == 'lazyed') {
+					this.loadStatus = 'loaded';
+					this.$emit('load', this.index);
+				}
+			},
+			// 閿欒鐨勫浘鐗囧姞杞藉畬鎴�
+			errorImgLoaded() {
+				this.$emit('error', this.index);
+			},
+			// 鍥剧墖鍔犺浇澶辫触
+			loadError() {
+				this.isError = true;
+			},
+			disconnectObserver(observerName) {
+				const observer = this[observerName];
+				observer && observer.disconnect();
+			},
+		},
+		beforeDestroy() {
+			// 閿�姣侀〉闈㈡椂锛屽彲鑳借繕娌¤Е鍙戞煇寮犲緢搴曢儴鐨勬噿鍔犺浇鍥剧墖锛屾墍浠ユ妸杩欎釜浜嬩欢缁欏幓鎺�
+			//observer.disconnect();
+		},
+		mounted() {
+			// 姝OnReachBottom浜嬩欢鐢眒ixin.js鍙戝嚭锛岀洰鐨勬槸璁╅〉闈㈠埌搴曟椂锛屼繚璇佹墍鏈夊浘鐗囬兘杩涜鍔犺浇锛屽仛鍒扮粷瀵圭ǔ瀹氫笖鍙潬
+			this.$nextTick(() => {
+				uni.$once('uOnReachBottom', () => {
+					if (!this.isShow) this.isShow = true;
+				});
+			})
+			// mounted鐨勬椂鍊欙紝涓嶄竴瀹氭寕杞戒簡杩欎釜鍏冪礌锛屽欢鏃�30ms锛屽惁鍒欎細鎶ラ敊鎴栬�呬笉鎶ラ敊锛屼絾鏄篃娌℃湁鏁堟灉
+			setTimeout(() => {
+				// 杩欓噷鏄粍浠跺唴鑾峰彇甯冨眬鐘舵�侊紝涓嶈兘鐢╱ni.createIntersectionObserver锛岃�屽繀椤荤敤this.createIntersectionObserver
+				this.disconnectObserver('contentObserver');
+				const contentObserver = uni.createIntersectionObserver(this);
+				// 瑕佺悊瑙ｈ繖閲屾�庝箞璁＄畻鐨勶紝璇风湅杩欎釜锛�
+				// https://blog.csdn.net/qq_25324335/article/details/83687695
+				contentObserver.relativeToViewport({
+					bottom: this.getThreshold,
+				}).observe('.u-lazy-item-' + this.elIndex, (res) => {
+					if (res.intersectionRatio > 0) {
+						// 鎳掑姞杞界姸鎬佹敼鍙�
+						this.isShow = true;
+						// 濡傛灉鍥剧墖宸茬粡鍔犺浇锛屽幓鎺夌洃鍚紝鍑忓皯鎬ц兘鐨勬秷鑰�
+						this.disconnectObserver('contentObserver');
+					}
+				})
+				this.contentObserver = contentObserver;
+			}, 30)
+		}
+	}
+</script>
+
+<style scoped lang="scss">
+	@import "../../libs/css/style.components.scss";
+	
+	.u-wrap {
+		background-color: #eee;
+		overflow: hidden;
+	}
+
+	.u-lazy-item {
+		width: 100%;
+		// 楠楃郴缁熷紑鍚‖浠跺姞閫�
+		transform: transition3d(0, 0, 0);
+		// 闃叉鍥剧墖鍔犺浇鈥滈棯涓�涓嬧��
+		will-change: transform;
+		/* #ifndef APP-NVUE */
+		display: block;
+		/* #endif */
+	}
+</style>

--
Gitblit v1.9.3