uview-ultra 4.5.46

package/components/up-lazy-load/up-lazy-load.uvue

@@ -0,0 +1,340 @@
+<template>
+    <view class="up-wrap" :style="wrapStyle" :class="'up-lazy-item-' + elIndex">
+        <view :class="'up-lazy-item-' + elIndex">
+            <image :style="imageStyle" v-if="!isError"
+                class="up-lazy-item" :src="isShow ? image : loadingImg" :mode="imgMode" @load="imgLoaded"
+                @error="loadError" @tap="clickImg">
+            </image>
+            <image :style="imageStyle" class="up-lazy-item error" v-else
+                :src="errorImg" :mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image>
+        </view>
+    </view>
+</template>
+
+<script setup lang="uts">
+    import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import { addUnit, guid } from '../../libs/function/index.uts';
+    
+    /**
+     * lazyLoad 懒加载
+     * @description 懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等.
+     * @tutorial https://uview-plus.jiangruyi.com/components/lazy-load.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 图片加载成功时，淡入淡出时间，单位ms（默认）
+     * @property {String} effect 图片加载成功时，淡入淡出的css动画效果（默认ease-in-out）
+     * @property {Boolean} is-effect 图片加载成功时，是否启用淡入淡出效果（默认true）
+     * @property {String Number} border-radius 图片圆角值，单位rpx（默认0）
+     * @property {String Number} height 图片高度，注意：实际高度可能受img-mode参数影响（默认450）
+     * @property {String Number} mg-mode 图片的裁剪模式，详见image组件裁剪模式（默认widthFix）
+     * @event {Function} click 点击图片时触发
+     * @event {Function} load 图片加载成功时触发
+     * @event {Function} error 图片加载失败时触发
+     * @example <up-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></up-lazy-load>
+     */
+    defineOptions({
+        styleIsolation: 'app-and-page',
+        name: 'up-lazy-load'
+    })
+
+    const props = defineProps({
+		// 用户自定义值，在事件触发时回调，用以区分是哪个图片
+		index: {
+			type: [Number, String],
+			default: ''
+		},
+		// 要显示的图片
+		image: {
+			type: String,
+			default: ''
+		},
+		// 图片裁剪模式
+		imgMode: {
+			type: String,
+			default: 'widthFix'
+		},
+		// 占位图片路径
+		loadingImg: {
+			type: String,
+			default: ''
+		},
+		// 加载失败的错误占位图
+		errorImg: {
+			type: String,
+			default: ''
+		},
+		// 图片进入可见区域前多少像素时，单位rpx，开始加载图片
+		// 负数为图片超出屏幕底部多少距离后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发(图片还没出现在屏幕上)
+		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
+		},
+		// 图片高度，单位rpx
+		height: {
+			type: [Number, String],
+			default: '200'
+		}
+	})
+
+    const emit = defineEmits(['click', 'load', 'error'])
+    const instance = getCurrentInstance()!.proxy!
+    const isShow = ref(false)
+    const opacity = ref(1)
+    const time = ref(props.duration)
+    const loadStatus = ref('') // 默认是懒加载中的状态
+    const isError = ref(false) // 图片加载失败
+    const elIndex = guid()
+    const contentObserver = ref<any | null>(null)
+    const checkTimer = ref(0)
+
+    const toNumber = (value: any | null): number => {
+        if (typeof value === 'number') {
+            return value
+        }
+        if (value == null) {
+            return 0
+        }
+        const parsed = parseFloat(value.toString())
+        return isNaN(parsed) ? 0 : parsed
+    }
+
+    const wrapStyle = computed((): UTSJSONObject => {
+        const style = {} as UTSJSONObject
+        style['opacity'] = opacity.value
+        style['borderRadius'] = props.borderRadius.toString() + 'rpx'
+        style['transition'] = 'opacity ' + (toNumber(time.value) / 1000).toString() + 's ease-in-out'
+        return style
+    })
+
+    // 计算图片的高度，可能为auto，带%，或者直接数值
+    const imgHeight = computed((): string => {
+        return addUnit(props.height);
+    })
+
+    const imageStyle = computed((): UTSJSONObject => {
+        const style = {} as UTSJSONObject
+        style['borderRadius'] = props.borderRadius.toString() + 'rpx'
+        style['height'] = imgHeight.value
+        return style
+    })
+
+    // 将threshold从rpx转为px
+    const getThreshold = computed((): number => {
+        // 先取绝对值，因为threshold可能是负数，最后根据threshold是正数或者负数，重新还原
+        const thresholdValue = toNumber(props.threshold);
+        const thresholdPx = Math.abs(thresholdValue) * uni.getWindowInfo().windowWidth / 750;
+        return thresholdValue < 0 ? -thresholdPx : thresholdPx;
+    })
+
+    // 用于重新初始化
+    const init = (): void => {
+        isError.value = false;
+        loadStatus.value = '';
+    }
+
+    // 点击图片触发的事件,loadlazy-还是懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
+    const clickImg = (): void => {
+        // 只通知当前图片的index
+        emit('click', props.index);
+    }
+
+    // 图片加载完成事件，可能是加载占位图时触发，也可能是加载真正的图片完成时触发，通过isShow区分
+    const imgLoaded = (): void => {
+        // 占位图加载完成
+        if (loadStatus.value == '') {
+            loadStatus.value = 'lazyed';
+        }
+        // 真正的图片加载完成
+        else if (loadStatus.value == 'lazyed') {
+            loadStatus.value = 'loaded';
+            emit('load', props.index);
+        }
+    }
+
+    // 错误的图片加载完成
+    const errorImgLoaded = (): void => {
+        emit('error', props.index);
+    }
+
+    // 图片加载失败
+    const loadError = (): void => {
+        isError.value = true;
+    }
+
+    const disconnectObserver = (): void => {
+        // #ifdef H5 || MP
+        if (contentObserver.value != null) {
+            contentObserver.value!.disconnect()
+            contentObserver.value = null
+        }
+        // #endif
+    }
+
+    const stopCheckTimer = (): void => {
+        if (checkTimer.value != 0) {
+            clearInterval(checkTimer.value)
+            checkTimer.value = 0
+        }
+    }
+
+    const checkVisible = (): void => {
+        const query = uni.createSelectorQuery().in(instance)
+        query.select('.up-lazy-item-' + elIndex).boundingClientRect((res: any) => {
+            const rect = res as NodeInfo | null
+            if (rect == null) {
+                return
+            }
+            const top = rect.top ?? 0
+            const bottom = rect.bottom ?? 0
+            const threshold = getThreshold.value
+            const windowHeight = uni.getWindowInfo().windowHeight
+            if (bottom >= -threshold && top <= windowHeight + threshold) {
+                isShow.value = true
+                stopCheckTimer()
+            }
+        }).exec()
+    }
+
+    const startAppLazyCheck = (): void => {
+        stopCheckTimer()
+        checkVisible()
+        if (!isShow.value) {
+            checkTimer.value = setInterval(() => {
+                checkVisible()
+            }, 160)
+        }
+    }
+
+    watch(isShow, () => {
+        // 如果是不开启过渡效果，直接返回
+        if (!props.isEffect) return;
+        time.value = 0;
+        // 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
+        opacity.value = 0;
+        // 延时30ms，否则在浏览器H5，过渡效果无效
+        setTimeout(() => {
+            time.value = props.duration;
+            opacity.value = 1;
+        }, 30)
+    })
+
+    // 图片路径发生变化时，需要重新标记一些变量，否则会一直卡在某一个状态，比如isError
+    watch((): string => props.image, (n: string) => {
+        if (n == '') {
+            // 如果传入null或者''，或者undefined，标记为错误状态
+            isError.value = true;
+        } else {
+            init();
+            isError.value = false;
+        }
+    })
+
+    onBeforeUnmount(() => {
+        // 销毁页面时，可能还没触发某张很底部的懒加载图片，所以把这个事件给去掉
+        disconnectObserver();
+        stopCheckTimer();
+    })
+
+    onMounted(() => {
+        // 此uOnReachBottom事件由mixin.js发出，目的是让页面到底时，保证所有图片都进行加载，做到绝对稳定且可靠
+        nextTick(() => {
+            uni.$once('uOnReachBottom', (_event: any) => {
+                if (!isShow.value) isShow.value = true;
+            });
+        })
+        // mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
+
+        setTimeout(() => {
+            // #ifdef APP
+            startAppLazyCheck()
+            // #endif
+
+            // #ifdef H5 || MP
+            // 这里是组件内获取布局状态，不能用uni.createIntersectionObserver，而必须用this.createIntersectionObserver
+            disconnectObserver();
+            const observer = uni.createIntersectionObserver(instance);
+            // 要理解这里怎么计算的，请看这个：
+            // https://blog.csdn.net/qq_25324335/article/details/83687695
+            observer.relativeToViewport({
+                bottom: getThreshold.value,
+			}).observe('.up-lazy-item-' + elIndex, (res: any) => {
+                // console.log('relativeToViewport', res)
+				if (res != null && res.intersectionRatio != null && res.intersectionRatio > 0) {
+                    // 懒加载状态改变
+                    isShow.value = true;
+                    // 如果图片已经加载，去掉监听，减少性能的消耗
+                    disconnectObserver();
+                }
+            })
+            contentObserver.value = observer;
+            // #endif
+        }, 30)
+    })
+
+    defineExpose({
+        isShow,
+        opacity,
+        time,
+        loadStatus,
+        isError,
+        elIndex,
+        contentObserver,
+        checkTimer,
+        wrapStyle,
+        imageStyle,
+        getThreshold,
+        imgHeight,
+        init,
+        clickImg,
+        imgLoaded,
+        errorImgLoaded,
+        loadError,
+        toNumber,
+        disconnectObserver,
+        stopCheckTimer,
+        startAppLazyCheck,
+        checkVisible
+    })
+</script>
+
+<style scoped lang="scss">
+    @import "../../libs/css/components.scss";
+
+    .up-wrap {
+        background-color: #eee;
+        overflow: hidden;
+    }
+
+    .up-lazy-item {
+        // 骗系统开启硬件加速
+        transform: translate3d(0, 0, 0);
+        /* #ifndef APP-NVUE */
+        display: flex;
+        width: 100%;
+        /* #endif */
+    }
+</style>

package/components/up-lazy-load/up-lazy-load.vue

@@ -0,0 +1,280 @@
+<template>
+    <view class="up-wrap" :style="{
+		opacity: Number(opacity),
+		borderRadius: borderRadius + 'rpx',
+		// 因为time值需要改变,所以不直接用duration值(不能改变父组件prop传过来的值)
+		transition: `opacity ${time / 1000}s ease-in-out`
+	}" :class="'up-lazy-item-' + elIndex">
+        <view :class="'up-lazy-item-' + elIndex">
+            <image :style="{ borderRadius: borderRadius + 'rpx', height: imgHeight }" v-if="!isError"
+                class="up-lazy-item" :src="isShow ? image : loadingImg" :mode="imgMode" @load="imgLoaded"
+                @error="loadError" @tap="clickImg">
+            </image>
+            <image :style="{ borderRadius: borderRadius + 'rpx', height: imgHeight }" class="up-lazy-item error" v-else
+                :src="errorImg" :mode="imgMode" @load="errorImgLoaded" @tap="clickImg"></image>
+        </view>
+    </view>
+</template>
+
+<script setup>
+/**
+ * lazyLoad 懒加载
+ * @description 懒加载使用的场景为：页面有很多图片时，APP会同时加载所有的图片，导致页面卡顿，各个位置的图片出现前后不一致等.
+ * @tutorial https://uview-plus.jiangruyi.com/components/lazy-load.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 图片加载成功时，淡入淡出时间，单位ms（默认）
+ * @property {String} effect 图片加载成功时，淡入淡出的css动画效果（默认ease-in-out）
+ * @property {Boolean} is-effect 图片加载成功时，是否启用淡入淡出效果（默认true）
+ * @property {String Number} border-radius 图片圆角值，单位rpx（默认0）
+ * @property {String Number} height 图片高度，注意：实际高度可能受img-mode参数影响（默认450）
+ * @property {String Number} mg-mode 图片的裁剪模式，详见image组件裁剪模式（默认widthFix）
+ * @event {Function} click 点击图片时触发
+ * @event {Function} load 图片加载成功时触发
+ * @event {Function} error 图片加载失败时触发
+ * @example <up-lazy-load :image="image" :loading-img="loadingImg" :error-img="errorImg"></up-lazy-load>
+ */
+import { computed, getCurrentInstance, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { commonProps } from '../../libs/composable/useUltraUI.js'
+import { addUnit, guid, upCreateIntersectionObserver } from '../../libs/function/index.js'
+
+defineOptions({
+	name: 'up-lazy-load',
+	// #ifdef MP-WEIXIN
+	options: {
+		virtualHost: true
+	}
+	// #endif
+})
+
+const props = defineProps({
+	...commonProps,
+	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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'
+	},
+	// 图片进入可见区域前多少像素时，单位rpx，开始加载图片
+	// 负数为图片超出屏幕底部多少距离后触发懒加载，正数为图片顶部距离屏幕底部多少距离时触发(图片还没出现在屏幕上)
+	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
+	},
+	// 图片高度，单位rpx
+	height: {
+		type: [Number, String],
+		default: '200'
+	}
+})
+
+const emit = defineEmits(['click', 'load', 'error'])
+const instance = getCurrentInstance()
+const proxy = instance?.proxy
+
+const isShow = ref(false)
+const opacity = ref(1)
+const time = ref(props.duration)
+const loadStatus = ref('') // 默认是懒加载中的状态
+const isError = ref(false) // 图片加载失败
+const elIndex = ref(guid())
+
+// 由于一些特殊原因，不能将此变量放到 data 中定义
+let observer = {}
+let contentObserver = null
+
+// 将threshold从rpx转为px
+const getThreshold = computed(() => {
+	// 先取绝对值，因为threshold可能是负数，最后根据 props.threshold 是正数或者负数，重新还原
+	const thresholdPx = uni.upx2px(Math.abs(props.threshold))
+	return props.threshold < 0 ? -thresholdPx : thresholdPx
+})
+
+// 计算图片的高度，可能为auto，带%，或者直接数值
+const imgHeight = computed(() => {
+	return addUnit(props.height)
+})
+
+watch(isShow, () => {
+	// 如果是不开启过渡效果，直接返回
+	if (!props.isEffect) return
+	time.value = 0
+	// 原来opacity为1(不透明，是为了显示占位图)，改成0(透明，意味着该元素显示的是背景颜色，默认的白色)，再改成1，是为了获得过渡效果
+	opacity.value = 0
+	// 延时30ms，否则在浏览器H5，过渡效果无效
+	setTimeout(() => {
+		time.value = props.duration
+		opacity.value = 1
+	}, 30)
+})
+
+// 图片路径发生变化时，需要重新标记一些变量，否则会一直卡在某一个状态，比如isError
+watch(() => props.image, (n) => {
+	if (!n) {
+		// 如果传入null或者''，或者undefined，标记为错误状态
+		isError.value = true
+	} else {
+		init()
+		isError.value = false
+	}
+})
+
+// 用于重新初始化
+function init() {
+	isError.value = false
+	loadStatus.value = ''
+}
+
+// 点击图片触发的事件,loadlazy-还是懒加载中状态，loading-图片正在加载，loaded-图片加加载完成
+function clickImg() {
+	let whichImg = ''
+	// 如果isShow为false，意味着图片还没开始加载，点击的只能是最开始的占位图
+	if (isShow.value == false) whichImg = 'lazyImg'
+	// 如果isError为true，意味着图片加载失败，这是只剩下错误的占位图，所以点击的只能是错误占位图
+	// 当然，也可以给错误的占位图元素绑定点击事件，看你喜欢~
+	else if (isError.value == true) whichImg = 'errorImg'
+	// 总共三张图片，除了两个占位图，剩下的只能是正常的那张图片了
+	else whichImg = 'realImg'
+	// 只通知当前图片的index
+	emit('click', props.index)
+}
+
+// 图片加载完成事件，可能是加载占位图时触发，也可能是加载真正的图片完成时触发，通过isShow区分
+function imgLoaded() {
+	// 占位图加载完成
+	if (loadStatus.value == '') {
+		loadStatus.value = 'lazyed'
+	}
+	// 真正的图片加载完成
+	else if (loadStatus.value == 'lazyed') {
+		loadStatus.value = 'loaded'
+		emit('load', props.index)
+	}
+}
+
+// 错误的图片加载完成
+function errorImgLoaded() {
+	emit('error', props.index)
+}
+
+// 图片加载失败
+function loadError() {
+	isError.value = true
+}
+
+function disconnectObserver(observerName) {
+	if (observerName === 'contentObserver') {
+		contentObserver && contentObserver.disconnect()
+		contentObserver = null
+		return
+	}
+	const target = observerName === 'observer' ? observer : null
+	target && target.disconnect && target.disconnect()
+}
+
+onBeforeUnmount(() => {
+	// 销毁页面时，可能还没触发某张很底部的懒加载图片，所以把这个事件给去掉
+	// observer.disconnect();
+	disconnectObserver('contentObserver')
+})
+
+onMounted(() => {
+	// 此uOnReachBottom事件由mixin.js发出，目的是让页面到底时，保证所有图片都进行加载，做到绝对稳定且可靠
+	nextTick(() => {
+		uni.$once('uOnReachBottom', () => {
+			if (!isShow.value) isShow.value = true
+		})
+	})
+	// mounted的时候，不一定挂载了这个元素，延时30ms，否则会报错或者不报错，但是也没有效果
+
+	setTimeout(() => {
+		// #ifndef APP-NVUE
+		// 这里是组件内获取布局状态，不能直传Vue实例给uni.createIntersectionObserver，
+		// 否则小程序内部会Object.keys(vm)导致告警，统一走upCreateIntersectionObserver
+		// disconnectObserver('contentObserver');
+		// nvue 里不支持
+		const observerContext = proxy
+		const nextObserver = upCreateIntersectionObserver(observerContext)
+		// 要理解这里怎么计算的，请看这个：
+		// https://blog.csdn.net/qq_25324335/article/details/83687695
+		nextObserver.relativeToViewport({
+			bottom: getThreshold.value,
+		}).observe('.up-lazy-item-' + elIndex.value, (res) => {
+			// console.log('relativeToViewport', res)
+			if (res.intersectionRatio > 0) {
+				// 懒加载状态改变
+				isShow.value = true
+				// 如果图片已经加载，去掉监听，减少性能的消耗
+				disconnectObserver('contentObserver')
+			}
+		})
+		contentObserver = nextObserver
+		// #endif
+		// #ifdef APP-NVUE
+		isShow.value = true
+		// #endif
+	}, 30)
+})
+</script>
+
+
+<style scoped lang="scss">
+    @import "../../libs/css/components.scss";
+
+    .up-wrap {
+        background-color: #eee;
+        overflow: hidden;
+    }
+
+    .up-lazy-item {
+        // 骗系统开启硬件加速
+        transform: transition3d(0, 0, 0);
+        /* #ifndef APP-NVUE */
+        // 防止图片加载“闪一下”
+        will-change: transform;
+        display: block;
+        width: 100%;
+        /* #endif */
+    }
+</style>

package/components/up-line/line.js

@@ -0,0 +1,20 @@
+/*
+ * @Author       : LQ,jry
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-20 14:20:58
+ * @FilePath     : /uview-ultra/libs/config/props/line.js
+ */
+export default {
+    // line组件
+    line: {
+        color: '#d6d7d9',
+        length: '100%',
+        direction: 'row',
+        hairline: true,
+        margin: 0,
+        dashed: false
+    }
+}

package/components/up-line/line.uts

@@ -0,0 +1,20 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 11:04:49
+ * @FilePath     : /uview-ultra/libs/config/props/line.js
+ */
+export default {
+    // line组件
+    line: {
+        color: '#d6d7d9',
+        length: '100%',
+        direction: 'row',
+        hairline: true,
+        margin: '0',
+        dashed: false
+    }
+} as UTSJSONObject