uview-ultra-plus 1.0.0

package/uview-ultra/components/up-list/props.uts

@@ -0,0 +1,111 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-12-17 14:28:53
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-12-17 14:28:53
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './list.uts'
+let listProp = defProps['list'] as UTSJSONObject
+
+export const propsList = defineMixin({
+    props: {
+        // 控制是否出现滚动条，仅nvue有效
+        showScrollbar: {
+            type: Boolean,
+            default: listProp['showScrollbar']
+        },
+        // 距底部多少时触发scrolltolower事件
+        lowerThreshold: {
+            type: [String, Number],
+            default: listProp['lowerThreshold']
+        },
+        // 距顶部多少时触发scrolltoupper事件，非nvue有效
+        upperThreshold: {
+            type: [String, Number],
+            default: listProp['upperThreshold']
+        },
+        // 设置竖向滚动条位置
+        scrollTop: {
+            type: [String, Number],
+            default: listProp['scrollTop']
+        },
+        // 控制 onscroll 事件触发的频率，仅nvue有效
+        offsetAccuracy: {
+            type: [String, Number],
+            default: listProp['offsetAccuracy']
+        },
+        // 启用 flexbox 布局。开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点，仅微信小程序有效
+        enableFlex: {
+            type: Boolean,
+            default: listProp['enableFlex']
+        },
+        // 是否按分页模式显示List，默认值false
+        pagingEnabled: {
+            type: Boolean,
+            default: listProp['pagingEnabled']
+        },
+        // 是否允许List滚动
+        scrollable: {
+            type: Boolean,
+            default: listProp['scrollable']
+        },
+        // 值应为某子元素id（id不能以数字开头）
+        scrollIntoView: {
+            type: String,
+            default: listProp['scrollIntoView']
+        },
+        // 在设置滚动条位置时使用动画过渡
+        scrollWithAnimation: {
+            type: Boolean,
+            default: listProp['scrollWithAnimation']
+        },
+        // iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效
+        enableBackToTop: {
+            type: Boolean,
+            default: listProp['enableBackToTop']
+        },
+        // 列表的高度
+        height: {
+            type: [String, Number],
+            default: listProp['height']
+        },
+        // 列表宽度
+        width: {
+            type: [String, Number],
+            default: listProp['width']
+        },
+        // 列表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度
+        preLoadScreen: {
+            type: [String, Number],
+            default: listProp['preLoadScreen']
+        },
+        // 开启自定义下拉刷新
+        refresherEnabled: {
+            type: Boolean,
+            default: listProp['refresherEnabled']
+        },
+        // 设置自定义下拉刷新阈值	
+        refresherThreshold: {
+            type: Number,
+            default: listProp['refresherThreshold']
+        },
+        // 设置自定义下拉刷新默认样式，支持设置 black，white，none，none 表示不使用默认样式
+        refresherDefaultStyle: {
+            type: String,
+            default: listProp['refresherDefaultStyle']
+        },
+        // 设置自定义下拉刷新区域背景颜色
+        refresherBackground: {
+            type: String,
+            default: listProp['refresherBackground']
+        },
+        // 设置当前下拉刷新状态，true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
+        refresherTriggered: {
+            type: Boolean,
+            default: listProp['refresherTriggered']
+        }
+    }
+});

package/uview-ultra/components/up-list/up-list.uvue

@@ -0,0 +1,146 @@
+<template>
+	<scroll-view
+		class="up-list"
+		:scroll-into-view="scrollIntoView"
+		:style="[listStyle]"
+		:scroll-y="scrollable"
+		:scroll-top="parseFloat(scrollTop.toString())"
+		:lower-threshold="parseFloat(lowerThreshold.toString())"
+		:upper-threshold="parseFloat(upperThreshold.toString())"
+		:show-scrollbar="showScrollbar"
+		:scroll-with-animation="scrollWithAnimation"
+		@scroll="onScroll"
+		@scrolltolower="scrolltolower"
+		@scrolltoupper="scrolltoupper"
+		:refresher-enabled="refresherEnabled"
+		:refresher-threshold="refresherThreshold"
+		:refresher-default-style="refresherDefaultStyle"
+		:refresher-background="refresherBackground"
+		:refresher-triggered="refresherTriggered"
+		@refresherpulling="refresherpulling"
+		@refresherrefresh="refresherrefresh"
+		@refresherrestore="refresherrestore"
+		@refresherabort="refresherabort"
+	>
+		<view>
+			<slot />
+		</view>
+	</scroll-view>
+</template>
+
+<script>
+	import { propsList } from './props.uts';
+	import { mpMixin } from '../../libs/mixin/mpMixin.uts';
+	import { mixin } from '../../libs/mixin/mixin.uts';
+	import { addUnit, addStyle, deepMerge, sleep, getWindowInfo } from '../../libs/function/index.uts';
+	/**
+	 * List 列表
+	 * @description 该组件为高性能列表组件
+	 * @tutorial https://uview-plus.jiangruyi.com/components/list.html
+	 * @property {Boolean}			showScrollbar		控制是否出现滚动条，仅nvue有效 （默认 false ）
+	 * @property {String ｜ Number}	lowerThreshold		距底部多少时触发scrolltolower事件 （默认 50 ）
+	 * @property {String ｜ Number}	upperThreshold		距顶部多少时触发scrolltoupper事件，非nvue有效 （默认 0 ）
+	 * @property {String ｜ Number}	scrollTop			设置竖向滚动条位置（默认 0 ）
+	 * @property {String ｜ Number}	offsetAccuracy		控制 onscroll 事件触发的频率，仅nvue有效（默认 10 ）
+	 * @property {Boolean}			enableFlex			启用 flexbox 布局。开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点，仅微信小程序有效（默认 false ）
+	 * @property {Boolean}			pagingEnabled		是否按分页模式显示List，（默认 false ）
+	 * @property {Boolean}			scrollable			是否允许List滚动（默认 true ）
+	 * @property {String}			scrollIntoView		值应为某子元素id（id不能以数字开头）
+	 * @property {Boolean}			scrollWithAnimation	在设置滚动条位置时使用动画过渡 （默认 false ）
+	 * @property {Boolean}			enableBackToTop		iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效 （默认 false ）
+	 * @property {String ｜ Number}	height				列表的高度 （默认 0 ）
+	 * @property {String ｜ Number}	width				列表宽度 （默认 0 ）
+	 * @property {String ｜ Number}	preLoadScreen		列表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度  （默认 1 ）
+	 * @property {Object}			customStyle			定义需要用到的外部样式
+	 *
+	 * @example <up-list @scrolltolower="scrolltolower"></up-list>
+	 */
+	export default {
+		name: 'up-list',
+		mixins: [mpMixin, mixin, propsList],
+		watch: {
+			scrollIntoView(n) {
+				this.scrollIntoViewById(n)
+			}
+		},
+		data() {
+			return {
+				// 记录内部滚动的距离
+				innerScrollTop: 0,
+				// vue下，scroll-view在上拉加载时的偏移值
+				offset: 0,
+				sys: getWindowInfo() as GetWindowInfoResult
+			}
+		},
+		computed: {
+			listStyle() {
+				const style = {};
+				if (this.width != 0) style['width'] = addUnit(this.width)
+				if (this.height != 0) style['height'] = addUnit(this.height)
+				// 如果没有定义列表高度，则默认使用屏幕高度
+				if (style['height'] == null) style['height'] = addUnit(this.sys.windowHeight, 'px')
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		created() {
+			// this.refs = []
+		// 	this.children = []
+		},
+		mounted() {},
+		emits: ["scroll", "scrolltolower", "scroll-to-lower", "scrolltoupper", "scroll-to-upper",
+			"refresherpulling", "refresherrefresh", "refresherrestore", "refresherabort"],
+		methods: {
+			updateOffsetFromChild(top: number) {
+				this.offset = top
+			},
+			onScroll(e: UniScrollEvent) {
+				let scrollTop = 0
+				scrollTop = e.detail.scrollTop
+				this.innerScrollTop = scrollTop
+				this.$emit('scroll', scrollTop)
+			},
+			scrollIntoViewById(id: string) {
+			},
+			// 滚动到底部触发事件
+			scrolltolower(e: UniScrollToLowerEvent) {
+				sleep(30).then(() => {
+					this.$emit('scrolltolower')
+					// 支付宝小程序奇怪无法触发scrolltolowerhttps://github.com/ijry/uview-plus/issues/422
+					this.$emit('scroll-to-lower')
+				})
+			},
+			// #ifndef APP-NVUE
+			// 滚动到底部时触发，非nvue有效
+			scrolltoupper(e: UniScrollToUpperEvent) {
+				sleep(30).then(() => {
+					this.$emit('scrolltoupper')
+					this.$emit('scroll-to-upper')
+					// 这一句很重要，能绝对保证在性功能障碍的webview，滚动条到顶时，取消偏移值，让页面置顶
+					this.offset = 0
+				})
+			},
+			refresherpulling(e: UniRefresherEvent) {
+				this.$emit('refresherpulling', e)
+			},
+			refresherrefresh(e: UniRefresherEvent) {
+				this.$emit('refresherrefresh', e)
+			},
+			refresherrestore(e: UniRefresherEvent) {
+				this.$emit('refresherrestore', e)
+			},
+			refresherabort(e: UniRefresherEvent) {
+				this.$emit('refresherabort', e)
+			}
+			// #endif
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-list {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+	}
+</style>

package/uview-ultra/components/up-list/up-list.vue

@@ -0,0 +1,185 @@
+<template>
+	<!-- #ifdef APP-NVUE -->
+	<list
+		class="up-list"
+		:enableBackToTop="enableBackToTop"
+		:loadmoreoffset="lowerThreshold"
+		:showScrollbar="showScrollbar"
+		:style="[listStyle]"
+		:offset-accuracy="Number(offsetAccuracy)"
+		@scroll="onScroll"
+		@loadmore="scrolltolower"
+	>
+		<slot />
+	</list>
+	<!-- #endif -->
+	<!-- #ifndef APP-NVUE -->
+	<scroll-view
+		class="up-list"
+		:scroll-into-view="scrollIntoView"
+		:style="[listStyle]"
+		:scroll-y="scrollable"
+		:scroll-top="Number(scrollTop)"
+		:lower-threshold="Number(lowerThreshold)"
+		:upper-threshold="Number(upperThreshold)"
+		:show-scrollbar="showScrollbar"
+		:enable-back-to-top="enableBackToTop"
+		:scroll-with-animation="scrollWithAnimation"
+		@scroll="onScroll"
+		@scrolltolower="scrolltolower"
+		@scrolltoupper="scrolltoupper"
+		:refresher-enabled="refresherEnabled"
+		:refresher-threshold="refresherThreshold"
+		:refresher-default-style="refresherDefaultStyle"
+		:refresher-background="refresherBackground"
+		:refresher-triggered="refresherTriggered"
+		@refresherpulling="refresherpulling"
+		@refresherrefresh="refresherrefresh"
+		@refresherrestore="refresherrestore"
+		@refresherabort="refresherabort"
+		:scroll-anchoring="true"
+	>
+		<view>
+			<slot />
+		</view>
+	</scroll-view>
+	<!-- #endif -->
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge, sleep, getWindowInfo } from '../../libs/function/index';
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * List 列表
+	 * @description 该组件为高性能列表组件
+	 * @tutorial https://uview-plus.jiangruyi.com/components/list.html
+	 * @property {Boolean}			showScrollbar		控制是否出现滚动条，仅nvue有效 （默认 false ）
+	 * @property {String ｜ Number}	lowerThreshold		距底部多少时触发scrolltolower事件 （默认 50 ）
+	 * @property {String ｜ Number}	upperThreshold		距顶部多少时触发scrolltoupper事件，非nvue有效 （默认 0 ）
+	 * @property {String ｜ Number}	scrollTop			设置竖向滚动条位置（默认 0 ）
+	 * @property {String ｜ Number}	offsetAccuracy		控制 onscroll 事件触发的频率，仅nvue有效（默认 10 ）
+	 * @property {Boolean}			enableFlex			启用 flexbox 布局。开启后，当前节点声明了display: flex就会成为flex container，并作用于其孩子节点，仅微信小程序有效（默认 false ）
+	 * @property {Boolean}			pagingEnabled		是否按分页模式显示List，（默认 false ）
+	 * @property {Boolean}			scrollable			是否允许List滚动（默认 true ）
+	 * @property {String}			scrollIntoView		值应为某子元素id（id不能以数字开头）
+	 * @property {Boolean}			scrollWithAnimation	在设置滚动条位置时使用动画过渡 （默认 false ）
+	 * @property {Boolean}			enableBackToTop		iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只对微信小程序有效 （默认 false ）
+	 * @property {String ｜ Number}	height				列表的高度 （默认 0 ）
+	 * @property {String ｜ Number}	width				列表宽度 （默认 0 ）
+	 * @property {String ｜ Number}	preLoadScreen		列表前后预渲染的屏数，1代表一个屏幕的高度，1.5代表1个半屏幕高度  （默认 1 ）
+	 * @property {Object}			customStyle			定义需要用到的外部样式
+	 *
+	 * @example <up-list @scrolltolower="scrolltolower"></up-list>
+	 */
+	export default {
+		name: 'up-list',
+		mixins: [mpMixin, mixin, props],
+		watch: {
+			scrollIntoView(n) {
+				this.scrollIntoViewById(n)
+			}
+		},
+		data() {
+			return {
+				// 记录内部滚动的距离
+				innerScrollTop: 0,
+				// vue下，scroll-view在上拉加载时的偏移值
+				offset: 0,
+				sys: getWindowInfo()
+			}
+		},
+		computed: {
+			listStyle() {
+				const style = {};
+				if (this.width != 0) style.width = addUnit(this.width)
+				if (this.height != 0) style.height = addUnit(this.height)
+				// 如果没有定义列表高度，则默认使用屏幕高度
+				if (!style.height) style.height = addUnit(this.sys.windowHeight, 'px')
+				return deepMerge(style, addStyle(this.customStyle))
+			}
+		},
+		provide() {
+			return {
+				uList: this
+			}
+		},
+		created() {
+			this.refs = []
+			this.children = []
+			this.anchors = []
+		},
+		mounted() {},
+		emits: ["scroll", "scrolltolower", "scroll-to-lower", "scrolltoupper", "scroll-to-upper",
+			"refresherpulling", "refresherrefresh", "refresherrestore", "refresherabort"],
+		methods: {
+			updateOffsetFromChild(top) {
+				this.offset = top
+			},
+			onScroll(e) {
+				let scrollTop = 0
+				// #ifdef APP-NVUE
+				scrollTop = e.contentOffset.y
+				// #endif
+				// #ifndef APP-NVUE
+				scrollTop = e.detail.scrollTop
+				// #endif
+				this.innerScrollTop = scrollTop
+				this.$emit('scroll', scrollTop)
+			},
+			scrollIntoViewById(id) {
+				// #ifdef APP-NVUE
+				// 根据id参数，找到所有up-list-item中匹配的节点，再通过dom模块滚动到对应的位置
+				const item = this.refs.find(item => item.$refs[id] ? true : false)
+				dom.scrollToElement(item.$refs[id], {
+					// 是否需要滚动动画
+					animated: this.scrollWithAnimation
+				})
+				// #endif
+			},
+			// 滚动到底部触发事件
+			scrolltolower(e) {
+				sleep(30).then(() => {
+					this.$emit('scrolltolower')
+					// 支付宝小程序奇怪无法触发scrolltolowerhttps://github.com/ijry/uview-plus/issues/422
+					this.$emit('scroll-to-lower')
+				})
+			},
+			// #ifndef APP-NVUE
+			// 滚动到底部时触发，非nvue有效
+			scrolltoupper(e) {
+				sleep(30).then(() => {
+					this.$emit('scrolltoupper')
+					this.$emit('scroll-to-upper')
+					// 这一句很重要，能绝对保证在性功能障碍的webview，滚动条到顶时，取消偏移值，让页面置顶
+					this.offset = 0
+				})
+			},
+			refresherpulling(e) {
+				this.$emit('refresherpulling', e)
+			},
+			refresherrefresh(e) {
+				this.$emit('refresherrefresh', e)
+			},
+			refresherrestore(e) {
+				this.$emit('refresherrestore', e)
+			},
+			refresherabort(e) {
+				this.$emit('refresherabort', e)
+			}
+			// #endif
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.up-list {
+		@include flex(column);
+
+	}
+</style>

package/uview-ultra/components/up-list-item/listItem.js

@@ -0,0 +1,15 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:15:40
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/listItem.js
+ */
+export default {
+    // listItem 组件
+    listItem: {
+        anchor: ''
+    }
+}

package/uview-ultra/components/up-list-item/listItem.uts

@@ -0,0 +1,15 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-12-17 16:40:32
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-12-17 16:40:32
+ * @FilePath     : /uview-ultra/libs/config/props/listItem.js
+ */
+export default {
+    // listItem 组件
+    listItem: {
+        anchor: ''
+    }
+} as UTSJSONObject

package/uview-ultra/components/up-list-item/props.js

@@ -0,0 +1,11 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 用于滚动到指定item
+        anchor: {
+            type: [String, Number],
+            default: () => defProps.listItem.anchor
+        }
+    }
+})

package/uview-ultra/components/up-list-item/props.uts

@@ -0,0 +1,21 @@
+/*
+ * @Author       : jry
+ * @Description  : uview-plus component's props mixin file
+ * @version      : 4.0
+ * @Date         : 2024-12-17 16:40:33
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-12-17 16:40:33
+ */
+import { defineMixin } from '../../libs/vue.uts'
+import defProps from './listItem.uts'
+let listItemProp = defProps['listItem'] as UTSJSONObject
+
+export const propsListItem = defineMixin({
+    props: {
+        // 用于滚动到指定item
+        anchor: {
+            type: [String, Number],
+            default: listItemProp['anchor']
+        }
+    }
+});

package/uview-ultra/components/up-list-item/up-list-item.uvue

@@ -0,0 +1,125 @@
+<template>
+	<view
+		class="up-list-item"
+		:ref="refstr"
+		fref="`up-list-item-${anchor}`"
+		:class="[`up-list-item-${refstr}`]"
+	>
+		<slot />
+	</view>
+</template>
+
+<script>
+	import { propsListItem } from './props.uts';
+	import { mpMixin } from '../../libs/mixin/mpMixin.uts';
+	import { mixin } from '../../libs/mixin/mixin.uts';
+	import { getWindowInfo, guid } from '../../libs/function/index.uts';
+	/**
+	 * List 列表
+	 * @description 该组件为高性能列表组件
+	 * @tutorial https://uview-plus.jiangruyi.com/components/list.html
+	 * @property {String | Number}	anchor	用于滚动到指定item
+	 * @example <up-list-item v-for="(item, index) in indexList" :key="index" ></up-list-item>
+	 */
+	export default {
+		name: 'up-list-item',
+		mixins: [mpMixin, mixin, propsListItem],
+		data() {
+			return {
+				// 节点信息
+				rect: {} as NodeInfo,
+				index: 0,
+				refstr: guid(),
+				show: true,
+				sys: getWindowInfo() as GetWindowInfoResult
+			}
+		},
+		computed: {
+
+		},
+		watch: {
+			// #ifndef APP-NVUE
+			// 'uList.innerScrollTop'(n) {
+			// 	const preLoadScreen = this.uList.preLoadScreen
+			// 	const windowHeight = this.sys.windowHeight
+			// 	if(n <= windowHeight * preLoadScreen) {
+			// 		this.parent.updateOffsetFromChild(0)
+			// 	} else if (this.rect.top <= n - windowHeight * preLoadScreen) {
+			// 		this.parent.updateOffsetFromChild(this.rect.top)
+			// 	}
+			// }
+			// #endif
+		},
+		created() {
+		},
+		mounted() {
+			this.init()
+		},
+		methods: {
+			init() {
+				// 初始化数据
+				this.updateParentData()
+				if (this.parent != null) {
+					this.index = ((this.parent as ComponentPublicInstance)!!.$data['childrenRefs'] as string[]).indexOf(this.refstr)
+					// console.log('*****', this.index, '*****')
+					// let childs: ComponentPublicInstance[] = this.parent.$data['children'] as ComponentPublicInstance[]
+					// childs.forEach(function(child: ComponentPublicInstance, index: number) {
+					// 	if(child == this) {
+					// 		this.index = index
+					// 	}
+					// });
+					this.resize()
+				}
+			},
+			updateParentData(): void {
+				// 此方法在mixin中
+				// @ts-ignore
+				this.getParentData('up-list', true)
+				// @ts-ignore
+				this.getParentData('up-list', false)
+			},
+			resize() {
+				// console.log("*******", `up-list-item-${this.anchor}`)
+				this.queryRect(`up-list-item-${this.refstr}`).then((size: NodeInfo) => {
+					if (this.index > 0) {
+						if (this.parent != null) {
+							let parentIns = this.parent as ComponentPublicInstance
+							const lastChild = (parentIns!!.$data['children'] as ComponentPublicInstance[])[this.index - 1]
+							if (lastChild == null) {
+								return
+							}
+							this.rect = size
+							const preLoadScreen = parseFloat(parentIns.$props['preLoadScreen'] != null ? parentIns.$props['preLoadScreen'].toString() : '0')
+							const windowHeight = this.sys.windowHeight
+							// #ifndef APP-NVUE
+							if (lastChild != null) {
+								this.rect.top = ((lastChild.$data['rect']as NodeInfo).top ?? 0)
+									+ ((lastChild.$data['rect'] as NodeInfo).height ?? 0)
+							}
+							let innerScrollTop = parentIns?.$data['innerScrollTop'] as string
+							if ((size.top ?? 0) >= parseFloat(innerScrollTop ?? '0') + (1 + preLoadScreen) * windowHeight) {
+								this.show = false
+							}
+						}
+						// #endif
+					} else {
+						console.log('index == 0')
+					}
+				})
+			},
+			// 查询元素尺寸
+			queryRect(el: string): Promise<NodeInfo> {
+				return new Promise((resolve) => {
+					// @ts-ignore
+					this.upGetRect(`.${el}`).then((size: NodeInfo) => {
+						resolve(size)
+					})
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-list-item {}
+</style>