uview-ultra 4.5.46

package/components/up-list-item/up-list-item.vue

@@ -0,0 +1,155 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<cell>
+		<!-- #endif -->
+		<view
+			class="up-list-item"
+			:ref="`up-list-item-${anchor}`"
+			:anchor="`up-list-item-${anchor}`"
+			:class="[`up-list-item-${anchor}`]"
+		>
+			<slot />
+		</view>
+		<!-- #ifdef APP-NVUE -->
+	</cell>
+	<!-- #endif -->
+</template>
+
+<script setup>
+	import { getCurrentInstance, inject, onMounted, ref, toRef, watch } from 'vue'
+	import { props as listItemProps } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	import { getWindowInfo } from '../../libs/function/index.js'
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * List 列表
+	 * @description 该组件为高性能列表组件
+	 * @tutorial https://uview-plus.jiangruyi.com/components/list.html
+	 * @property {String | Number}	anchor	用于滚动到指定item
+	 * @example <up-list-ite v-for="(item, index) in indexList" :key="index" ></up-list-item>
+	 */
+	defineOptions({
+		name: 'up-list-item',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...listItemProps.props
+	})
+	const instance = getCurrentInstance()
+	const uList = inject('uList', null)
+	const { parent, getParentData, $uGetRect } = useUltraUI(props)
+	const anchor = toRef(props, 'anchor')
+	// 节点信息
+	const rect = ref({})
+	const index = ref(0)
+	const show = ref(true)
+	const sys = getWindowInfo()
+
+	function init() {
+		// 初始化数据
+		updateParentData()
+		index.value = parent.value?.children?.indexOf(instance.proxy) ?? 0
+		resize()
+	}
+
+	function updateParentData() {
+		getParentData('up-list')
+	}
+
+	function getPreLoadScreen() {
+		return uList?.preLoadScreen?.value ?? parent.value?.preLoadScreen ?? 1
+	}
+
+	function getInnerScrollTop() {
+		return uList?.innerScrollTop?.value ?? parent.value?.innerScrollTop ?? 0
+	}
+
+	function updateOffsetFromChild(top) {
+		if (typeof uList?.updateOffsetFromChild === 'function') {
+			uList.updateOffsetFromChild(top)
+			return
+		}
+		parent.value?.updateOffsetFromChild?.(top)
+	}
+
+	function resize() {
+		queryRect(`up-list-item-${props.anchor}`).then(size => {
+			const lastChild = parent.value?.children?.[index.value - 1]
+			rect.value = size
+			const preLoadScreen = getPreLoadScreen()
+			const windowHeight = sys.windowHeight
+			// #ifndef APP-NVUE
+			if (lastChild) {
+				// children 是父级 up-list 共用的，里面可能混着 up-cell 等同父级组件
+				// （它们也走 getParentData('up-list')），不是每个都有 rect。
+				// 拿不到 rect 就跳过偏移，否则会抛 "Cannot read properties of undefined (reading 'top')"。
+				const lastRect = lastChild.rect
+				if (lastRect) {
+					rect.value.top = (lastRect.top ?? 0) + (lastRect.height ?? 0)
+				}
+			}
+			if (size.top >= getInnerScrollTop() + (1 + preLoadScreen) * windowHeight) {
+				show.value = false
+			}
+			// #endif
+		})
+	}
+
+	// 查询元素尺寸
+	function queryRect(el) {
+		return new Promise(resolve => {
+			// #ifndef APP-NVUE
+			$uGetRect(`.${el}`).then(size => {
+				resolve(size)
+			})
+			// #endif
+
+			// #ifdef APP-NVUE
+			const ref = instance.proxy.$refs[el]
+			dom.getComponentRect(ref, res => {
+				resolve(res.size)
+			})
+			// #endif
+		})
+	}
+
+	// #ifndef APP-NVUE
+	watch(() => uList?.innerScrollTop?.value, (n = 0) => {
+		const preLoadScreen = getPreLoadScreen()
+		const windowHeight = sys.windowHeight
+		if (n <= windowHeight * preLoadScreen) {
+			updateOffsetFromChild(0)
+		} else if (rect.value.top <= n - windowHeight * preLoadScreen) {
+			updateOffsetFromChild(rect.value.top)
+		}
+	})
+	// #endif
+
+	onMounted(() => {
+		init()
+	})
+
+	defineExpose({
+		anchor,
+		rect,
+		index,
+		show,
+		init,
+		updateParentData,
+		resize,
+		queryRect
+	})
+</script>
+
+<style lang="scss" scoped>
+
+	.up-list-item {}
+</style>

package/components/up-loading-icon/loadingIcon.js

@@ -0,0 +1,30 @@
+/*
+ * @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/loadingIcon.js
+ */
+import config from '../../libs/config/config.js'
+
+const {
+    color
+} = config
+export default {
+    // loading-icon加载中图标组件
+    loadingIcon: {
+        show: true,
+        color: color['up-tips-color'],
+        textColor: color['up-tips-color'],
+        vertical: false,
+        mode: 'spinner',
+        size: 24,
+        textSize: 15,
+        text: '',
+        timingFunction: 'ease-in-out',
+        duration: 1200,
+        inactiveColor: ''
+    }
+}

package/components/up-loading-icon/loadingIcon.uts

@@ -0,0 +1,28 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 11:45:47
+ * @FilePath     : /uview-ultra/libs/config/props/loadingIcon.js
+ */
+import config from '../../libs/config/config.uts'
+// let color = config['color'] as UTSJSONObject
+
+export default {
+    // loading-icon加载中图标组件
+    loadingIcon: {
+        show: true,
+        color: config.getString('color.up-tips-color'),
+        textColor: config.getString('color.up-tips-color'),
+        vertical: false,
+        mode: 'spinner',
+        size: '24',
+        textSize: '15',
+        text: '',
+        timingFunction: 'ease-in-out',
+        duration: 1200,
+        inactiveColor: ''
+    }
+} as UTSJSONObject

package/components/up-loading-icon/props.js

@@ -0,0 +1,62 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const propsLoadicon = defineMixin({
+    props: {
+        // 是否显示组件
+        show: {
+            type: Boolean,
+            default: () => defProps.loadingIcon.show
+        },
+        // 颜色
+        color: {
+            type: String,
+            default: () => defProps.loadingIcon.color
+        },
+        // 提示文字颜色
+        textColor: {
+            type: String,
+            default: () => defProps.loadingIcon.textColor
+        },
+        // 文字和图标是否垂直排列
+        vertical: {
+            type: Boolean,
+            default: () => defProps.loadingIcon.vertical
+        },
+        // 模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形
+        mode: {
+            type: String,
+            default: () => defProps.loadingIcon.mode
+        },
+        // 图标大小，单位默认px
+        size: {
+            type: [String, Number],
+            default: () => defProps.loadingIcon.size
+        },
+        // 文字大小
+        textSize: {
+            type: [String, Number],
+            default: () => defProps.loadingIcon.textSize
+        },
+        // 文字内容
+        text: {
+            type: [String, Number],
+            default: () => defProps.loadingIcon.text
+        },
+        // 动画模式
+        timingFunction: {
+            type: String,
+            default: () => defProps.loadingIcon.timingFunction
+        },
+        // 动画执行周期时间
+        duration: {
+            type: [String, Number],
+            default: () => defProps.loadingIcon.duration
+        },
+        // mode=circle时的暗边颜色
+        inactiveColor: {
+            type: String,
+            default: () => defProps.loadingIcon.inactiveColor
+        }
+    }
+})

package/components/up-loading-icon/props.uts

@@ -0,0 +1,71 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-04-22 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 12:27:20
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './loadingIcon.uts'
+let crtProp = defProps['loadingIcon'] as UTSJSONObject
+
+export const propsLoadicon = defineMixin({
+    props: {
+        // 是否显示组件
+        show: {
+            type: Boolean,
+            default: crtProp['show']
+        },
+        // 颜色
+        color: {
+            type: String,
+            default: crtProp['color']
+        },
+        // 提示文字颜色
+        textColor: {
+            type: String,
+            default: crtProp['textColor']
+        },
+        // 文字和图标是否垂直排列
+        vertical: {
+            type: Boolean,
+            default: crtProp['vertical']
+        },
+        // 模式选择，circle-圆形，spinner-花朵形，semicircle-半圆形
+        mode: {
+            type: String,
+            default: crtProp['mode']
+        },
+        // 图标大小，单位默认px
+        size: {
+            type: [String, Number],
+            default: crtProp['size']
+        },
+        // 文字大小
+        textSize: {
+            type: [String, Number],
+            default: crtProp['textSize']
+        },
+        // 文字内容
+        text: {
+            type: [String, Number],
+            default: crtProp['text']
+        },
+        // 动画模式
+        timingFunction: {
+            type: String,
+            default: crtProp['timingFunction']
+        },
+        // 动画执行周期时间
+        duration: {
+            type: [String, Number],
+            default: crtProp['duration']
+        },
+        // mode=circle时的暗边颜色
+        inactiveColor: {
+            type: String,
+            default: crtProp['inactiveColor']
+        }
+    }
+})