uview-ultra 4.5.46

package/components/up-row-notice/up-row-notice.vue

@@ -0,0 +1,346 @@
+<template>
+	<view
+		class="up-notice"
+		@tap="clickHandler"
+	>
+		<slot name="icon">
+			<view
+				class="up-notice__left-icon"
+				v-if="icon"
+			>
+				<up-icon
+					:name="icon"
+					:color="color"
+					size="19"
+				></up-icon>
+			</view>
+		</slot>
+		<view
+			class="up-notice__content"
+			ref="up-notice__content"
+		>
+			<view
+				ref="up-notice__content__text"
+				class="up-notice__content__text"
+				:style="[animationStyle]"
+			>
+				<text
+					v-for="(item, index) in innerText"
+					:key="index"
+					:style="[textStyle]"
+				>{{item}}</text>
+			</view>
+		</view>
+		<view
+			class="up-notice__right-icon"
+			v-if="['link', 'closable'].includes(mode)"
+		>
+			<up-icon
+				v-if="mode === 'link'"
+				name="arrow-right"
+				:size="17"
+				:color="color"
+			></up-icon>
+			<up-icon
+				v-if="mode === 'closable'"
+				@click="close"
+				name="close"
+				:size="16"
+				:color="color"
+			></up-icon>
+		</view>
+	</view>
+</template>
+<script setup>
+	import { computed, getCurrentInstance, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+	import { props as rowNoticeProps } from './props.js'
+	import { commonProps, useUltraUI } from '../../libs/composable/useUltraUI.js'
+	import { addUnit, error, sleep, getPx } from '../../libs/function/index.js'
+	import test from '../../libs/function/test.js'
+	// #ifdef APP-NVUE
+	const animation = uni.requireNativePlugin('animation')
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * RowNotice 滚动通知中的水平滚动模式
+	 * @description 水平滚动
+	 * @tutorial https://ijry.github.io/uview-plus/components/noticeBar.html
+	 * @property {String | Number}	text			显示的内容，字符串
+	 * @property {String}			icon			是否显示左侧的音量图标 (默认 'volume' )
+	 * @property {String}			mode			通告模式，link-显示右箭头，closable-显示右侧关闭图标
+	 * @property {String}			color			文字颜色，各图标也会使用文字颜色 (默认 '#f9ae3d' )
+	 * @property {String}			bgColor			背景颜色 (默认 ''#fdf6ec' )
+	 * @property {String | Number}	fontSize		字体大小，单位px (默认 14 )
+	 * @property {String | Number}	speed			水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度  (默认 80 )
+	 *
+	 * @event {Function} click 点击通告文字触发
+	 * @event {Function} close 点击右侧关闭图标触发
+	 * @example
+	 */
+	defineOptions({
+		name: 'up-row-notice',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...rowNoticeProps.props
+	})
+	const emit = defineEmits(['click', 'close'])
+	const instance = getCurrentInstance()
+	const { $uGetRect } = useUltraUI(props)
+	const animationDuration = ref('0') // 动画执行时间
+	const animationPlayState = ref('paused') // 动画的开始和结束执行
+	// nvue下，内容发生变化，导致滚动宽度也变化，需要标志为是否需要重新计算宽度
+	// 不能在内容变化时直接重新计算，因为nvue的animation模块上一次的滚动不是刚好结束，会有影响
+	const nvueInit = ref(true)
+	const stopAnimation = ref(false)
+	const webviewHide = ref(false)
+
+	// 文字内容的样式
+	const textStyle = computed(() => {
+		const style = {}
+		// innerText 切分后的空格可能位于独立 text 节点的首尾，pre 可保留原文空白且不会换行
+		style.whiteSpace = 'pre !important'
+		style.color = props.color
+		style.fontSize = addUnit(props.fontSize)
+		return style
+	})
+
+	const animationStyle = computed(() => {
+		const style = {}
+		style.animationDuration = animationDuration.value
+		style.animationPlayState = animationPlayState.value
+		return style
+	})
+
+	// 内部对用户传入的数据进一步分割，放到多个text标签循环，否则如果用户传入的字符串很长（100个字符以上）
+	// 放在一个text标签中进行滚动，在低端安卓机上，动画可能会出现抖动现象，需要分割到多个text中可解决此问题
+	const innerText = computed(() => {
+		const result = []
+		// 每组text标签的字符长度
+		const len = 20
+		const textArr = props.text.split('')
+		for (let i = 0; i < textArr.length; i += len) {
+			// 对拆分的后的text进行slice分割，得到的为数组再进行join拼接为字符串
+			result.push(textArr.slice(i, i + len).join(''))
+		}
+		return result
+	})
+
+	function updateAnimation() {
+		// #ifdef APP-NVUE
+		nvueInit.value = true
+		// #endif
+		// #ifndef APP-NVUE
+		vue()
+		// #endif
+	}
+
+	function init() {
+		// #ifdef APP-NVUE
+		nvue()
+		// #endif
+
+		// #ifndef APP-NVUE
+		vue()
+		// #endif
+
+		if (!test.string(props.text)) {
+			error('noticebar组件direction为row时，要求text参数为字符串形式')
+		}
+	}
+
+	// vue版处理
+	async function vue() {
+		// #ifndef APP-NVUE
+		let boxWidth = 0
+		let textWidth = 0
+		// 进行一定的延时
+		await sleep()
+		// 查询盒子和文字的宽度
+		textWidth = (await $uGetRect('.up-notice__content__text')).width
+		boxWidth = (await $uGetRect('.up-notice__content')).width
+		// 根据t=s/v(时间=路程/速度)，这里为何不需要加上#up-notice-box的宽度，因为中设置了.up-notice-content样式中设置了padding-left: 100%
+		// 恰巧计算出来的结果中已经包含了#up-notice-box的宽度
+		animationDuration.value = `${textWidth / getPx(props.speed)}s`
+		// 这里必须这样开始动画，否则在APP上动画速度不会改变
+		animationPlayState.value = 'paused'
+		setTimeout(() => {
+			animationPlayState.value = 'running'
+		}, 10)
+		// #endif
+	}
+
+	// nvue版处理
+	async function nvue() {
+		// #ifdef APP-NVUE
+		nvueInit.value = false
+		let boxWidth = 0
+		let textWidth = 0
+		// 进行一定的延时
+		await sleep()
+		// 查询盒子和文字的宽度
+		textWidth = (await getNvueRect('up-notice__content__text')).width
+		boxWidth = (await getNvueRect('up-notice__content')).width
+		// 将文字移动到盒子的右边沿，之所以需要这么做，是因为nvue不支持100%单位，否则可以通过css设置
+		animation.transition(instance.proxy.$refs['up-notice__content__text'], {
+			styles: {
+				transform: `translateX(${boxWidth}px)`
+			},
+		}, () => {
+			// 如果非禁止动画，则开始滚动
+			!stopAnimation.value && loopAnimation(textWidth, boxWidth)
+		})
+		// #endif
+	}
+
+	function loopAnimation(textWidth, boxWidth) {
+		// #ifdef APP-NVUE
+		animation.transition(instance.proxy.$refs['up-notice__content__text'], {
+			styles: {
+				// 目标移动终点为-textWidth，也即当文字的最右边贴到盒子的左边框的位置
+				transform: `translateX(-${textWidth}px)`
+			},
+			// 滚动时间的计算为，时间 = 路程(boxWidth + textWidth) / 速度，最后转为毫秒
+			duration: (boxWidth + textWidth) / getPx(props.speed) * 1000,
+			delay: 10
+		}, () => {
+			animation.transition(instance.proxy.$refs['up-notice__content__text'], {
+				styles: {
+					// 重新将文字移动到盒子的右边沿
+					transform: `translateX(${stopAnimation.value ? 0 : boxWidth}px)`
+				},
+			}, () => {
+				// 如果非禁止动画，则继续下一轮滚动
+				if (!stopAnimation.value) {
+					// 判断是否需要初始化计算尺寸
+					if (nvueInit.value) {
+						nvue()
+					} else {
+						loopAnimation(textWidth, boxWidth)
+					}
+				}
+			})
+		})
+		// #endif
+	}
+
+	function getNvueRect(el) {
+		// #ifdef APP-NVUE
+		// 返回一个promise
+		return new Promise(resolve => {
+			dom.getComponentRect(instance.proxy.$refs[el], (res) => {
+				resolve(res.size)
+			})
+		})
+		// #endif
+	}
+
+	// 点击通告栏
+	function clickHandler() {
+		emit('click')
+	}
+
+	// 点击右侧按钮，需要判断点击的是关闭图标还是箭头图标
+	function close() {
+		emit('close')
+	}
+
+	watch(() => props.text, (newValue) => {
+		updateAnimation()
+		if (!test.string(newValue)) {
+			error('noticebar组件direction为row时，要求text参数为字符串形式')
+		}
+	}, { immediate: true })
+
+	watch(() => props.fontSize, () => {
+		updateAnimation()
+	})
+
+	watch(() => props.speed, () => {
+		updateAnimation()
+	})
+
+	onMounted(() => {
+		// #ifdef APP-PLUS
+		// 在APP上(含nvue)，监听当前webview是否处于隐藏状态(进入下一页时即为hide状态)
+		// 如果webivew隐藏了，为了节省性能的损耗，应停止动画的执行，同时也是为了保持进入下一页返回后，滚动位置保持不变
+		const pages = getCurrentPages()
+		const page = pages[pages.length - 1]
+		const currentWebview = page.$getAppWebview()
+		currentWebview.addEventListener('hide', () => {
+			webviewHide.value = true
+		})
+		currentWebview.addEventListener('show', () => {
+			webviewHide.value = false
+		})
+		// #endif
+
+		init()
+	})
+
+	onBeforeUnmount(() => {
+		stopAnimation.value = true
+	})
+</script>
+
+<style lang="scss" scoped>
+	@import "../../libs/css/components.scss";
+
+	.up-notice {
+		@include flex;
+		align-items: center;
+		justify-content: space-between;
+
+		&__left-icon {
+			align-items: center;
+			margin-right: 5px;
+		}
+
+		&__right-icon {
+			margin-left: 5px;
+			align-items: center;
+		}
+
+		&__content {
+			text-align: right;
+			flex: 1;
+			@include flex;
+			flex-wrap: nowrap;
+			overflow: hidden;
+
+			&__text {
+				font-size: 14px;
+				color: $up-warning;
+				/* #ifndef APP-NVUE */
+				// 这一句很重要，为了能让滚动左右连接起来
+				padding-left: 100%;
+				word-break: keep-all;
+				// pre 而非 nowrap：切分后的空格落在 text 首尾时不能被折叠掉
+				white-space: pre;
+				animation: up-loop-animation 10s linear infinite both;
+				/* #endif */
+				@include flex(row);
+				line-height: 100%;
+			}
+		}
+
+	}
+
+	/* #ifndef APP-NVUE */
+	@keyframes up-loop-animation {
+		0% {
+			transform: translate3d(0, 0, 0);
+		}
+	
+		100% {
+			transform: translate3d(-100%, 0, 0);
+		}
+	}
+	/* #endif */
+</style>

package/components/up-safe-bottom/props.js

@@ -0,0 +1,7 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+
+export const props = defineMixin({
+    props: {
+    }
+})

package/components/up-safe-bottom/props.uts

@@ -0,0 +1,6 @@
+import { defineMixin } from '../../libs/vue'
+
+export const propsSafeBottom = defineMixin({
+    props: {
+    }
+})

package/components/up-safe-bottom/up-safe-bottom.uvue

@@ -0,0 +1,60 @@
+<template>
+	<view
+		class="up-safe-bottom"
+		:style="[style]"
+		:class="[!isNvue ? 'up-safe-area-inset-bottom': '']"
+	>
+	</view>
+</template>
+
+<script setup lang="uts">
+	import { computed, onMounted, ref } from 'vue'
+	import { addStyle, deepMerge, addUnit } from '../../libs/function/index'
+	/**
+	 * SafeBottom 底部安全区
+	 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
+	 * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
+	 * @property {type}		prop_name
+	 * @property {Object}	customStyle	定义需要用到的外部样式
+	 *
+	 * @event {Function()}
+	 * @example <up-safe-bottom></up-safe-bottom>
+	 */
+	defineOptions({
+		styleIsolation: 'app-and-page',
+		name: 'up-safe-bottom'
+	})
+
+	const props = defineProps({
+		customStyle: {
+			type: [Object, String],
+			default: () => ({})
+		}
+	})
+
+	const isNvue = ref(false)
+
+	const style = computed((): UTSJSONObject => {
+		const style = {} as UTSJSONObject
+		// #ifdef APP-NVUE || MP-TOUTIAO
+		// nvue下，高度使用js计算填充
+		style['height'] = addUnit(uni.getWindowInfo().safeAreaInsets.bottom, 'px')
+		// #endif
+		return deepMerge(style, addStyle(props.customStyle))
+	})
+
+	onMounted(() => {
+		// #ifdef APP-NVUE
+		// 标识为是否nvue
+		isNvue.value = true
+		// #endif
+	})
+</script>
+
+<style lang="scss" scoped>
+	.up-safe-bottom {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+	}
+</style>

package/components/up-safe-bottom/up-safe-bottom.vue

@@ -0,0 +1,54 @@
+<template>
+	<view
+		class="up-safe-bottom"
+		:style="[style]"
+		:class="[!isNvue && 'up-safe-area-inset-bottom']"
+	>
+	</view>
+</template>
+
+<script setup>
+	import { computed, onMounted, ref } from 'vue'
+	import { props as safeBottomProps } from './props.js'
+	import { commonProps } from '../../libs/composable/useUltraUI.js'
+	import { addStyle, deepMerge, addUnit, sys } from '../../libs/function/index.js'
+
+	defineOptions({
+		name: 'up-safe-bottom',
+		// #ifdef MP-WEIXIN
+		options: {
+			virtualHost: true
+		}
+		// #endif
+	})
+
+	const props = defineProps({
+		...commonProps,
+		...safeBottomProps.props
+	})
+	const isNvue = ref(false)
+
+	const style = computed(() => {
+		const style = {}
+		// #ifdef APP-NVUE || MP-TOUTIAO
+		// nvue下，高度使用js计算填充
+		style.height = addUnit(sys().safeAreaInsets.bottom, 'px')
+		// #endif
+		return deepMerge(style, addStyle(props.customStyle))
+	})
+
+	onMounted(() => {
+		// #ifdef APP-NVUE
+		// 标识为是否nvue
+		isNvue.value = true
+		// #endif
+	})
+</script>
+
+<style lang="scss" scoped>
+	.up-safe-bottom {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		/* #endif */
+	}
+</style>

package/components/up-scroll-list/nvue.js

@@ -0,0 +1,31 @@
+// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
+const BindingX = uni.requireNativePlugin('bindingx')
+import { os } from '../../libs/function/index.js';
+export default {
+    methods: {
+        // 此处不写注释，请自行体会
+        nvueScrollHandler(e) {
+            const anchor = this.$refs['up-scroll-list__scroll-view'].ref
+            let element = {}
+            if (this.$refs['up-scroll-list__indicator__line__bar']) {
+                element = this.$refs['up-scroll-list__indicator__line__bar'].ref
+            }
+            const scrollLeft = e.contentOffset.x
+            const contentSize = e.contentSize.width
+            const { scrollWidth } = this
+            const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
+            // 在安卓和iOS上，需要除的倍数不一样，iOS需要除以2
+            const actionNum = os() === 'ios' ? 2 : 1
+            const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${barAllMoveWidth}`
+            BindingX.bind({
+                anchor,
+                eventType: 'scroll',
+                props: [{
+                    element,
+                    property: 'transform.translateX',
+                    expression
+                }]
+            })
+        }
+    }
+}

package/components/up-scroll-list/props.js

@@ -0,0 +1,36 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 指示器的整体宽度
+        indicatorWidth: {
+            type: [String, Number],
+            default: () => defProps.scrollList.indicatorWidth
+        },
+        // 滑块的宽度
+        indicatorBarWidth: {
+            type: [String, Number],
+            default: () => defProps.scrollList.indicatorBarWidth
+        },
+        // 是否显示面板指示器
+        indicator: {
+            type: Boolean,
+            default: () => defProps.scrollList.indicator
+        },
+        // 指示器非激活颜色
+        indicatorColor: {
+            type: String,
+            default: () => defProps.scrollList.indicatorColor
+        },
+        // 指示器的激活颜色
+        indicatorActiveColor: {
+            type: String,
+            default: () => defProps.scrollList.indicatorActiveColor
+        },
+        // 指示器样式，可通过bottom，left，right进行定位
+        indicatorStyle: {
+            type: [String, Object],
+            default: () => defProps.scrollList.indicatorStyle
+        }
+    }
+})

package/components/up-scroll-list/props.uts

@@ -0,0 +1,38 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './scrollList'
+let crtProp = defProps['scrollList'] as UTSJSONObject
+
+export const propsScrollList = defineMixin({
+    props: {
+        // 指示器的整体宽度
+        indicatorWidth: {
+            type: [String, Number],
+            default: crtProp['indicatorWidth']
+        },
+        // 滑块的宽度
+        indicatorBarWidth: {
+            type: [String, Number],
+            default: crtProp['indicatorBarWidth']
+        },
+        // 是否显示面板指示器
+        indicator: {
+            type: Boolean,
+            default: crtProp['indicator']
+        },
+        // 指示器非激活颜色
+        indicatorColor: {
+            type: String,
+            default: crtProp['indicatorColor']
+        },
+        // 指示器的激活颜色
+        indicatorActiveColor: {
+            type: String,
+            default: crtProp['indicatorActiveColor']
+        },
+        // 指示器样式，可通过bottom，left，right进行定位
+        indicatorStyle: {
+            type: [String, UTSJSONObject],
+            default: crtProp['indicatorStyle']
+        }
+    }
+})

package/components/up-scroll-list/scrollList.js

@@ -0,0 +1,20 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-19 08:55:21
+ * @FilePath     : /uview-ultra/libs/config/props/scrollList.js
+ */
+export default {
+    // scrollList
+    scrollList: {
+        indicatorWidth: 50,
+        indicatorBarWidth: 20,
+        indicator: true,
+        indicatorColor: '#f2f2f2',
+        indicatorActiveColor: '#3c9cff',
+        indicatorStyle: ''
+    }
+}

package/components/up-scroll-list/scrollList.uts

@@ -0,0 +1,20 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-19 08:55:21
+ * @FilePath     : /uview-ultra/libs/config/props/scrollList.uts
+ */
+export default {
+    // scrollList
+    scrollList: {
+        indicatorWidth: 50,
+        indicatorBarWidth: 20,
+        indicator: true,
+        indicatorColor: '#f2f2f2',
+        indicatorActiveColor: '#3c9cff',
+        indicatorStyle: ''
+    }
+} as UTSJSONObject

package/components/up-scroll-list/scrollWxs.wxs

@@ -0,0 +1,50 @@
+function scroll(event, ownerInstance) {
+	// detail中含有scroll-view的信息，比如scroll-view的实际宽度，当前时间点scroll-view的移动距离等
+	var detail = event.detail
+	var scrollWidth = detail.scrollWidth
+	var scrollLeft = detail.scrollLeft
+	// 获取当前组件的dataset，说白了就是祸国殃民的腾xun搞出来的垃ji
+	var dataset = event.currentTarget.dataset
+	// 此为scroll-view外部包裹元素的宽度
+	// 某些HX版本(3.1.18)，发现view元素中大写的data-scrollWidth，在wxs中，变成了全部小写，所以这里需要特别处理
+	var scrollComponentWidth = dataset.scrollWidth || dataset.scrollwidth || 0
+	// 指示器和滑块的宽度
+	var indicatorWidth = dataset.indicatorWidth || dataset.indicatorwidth || 0
+	var barWidth = dataset.barWidth || dataset.barwidth || 0
+	// 此处的计算理由为：scroll-view的滚动距离与目标滚动距离(scroll-view的实际宽度减去包裹元素的宽度)之比，等于滑块当前移动距离与总需
+	// 滑动距离(指示器的总宽度减去滑块宽度)的比值
+	var x = scrollLeft / (scrollWidth - scrollComponentWidth) * (indicatorWidth - barWidth)
+	setBarStyle(ownerInstance, x)
+}
+
+// 由于webview的无能，无法保证scroll-view在滑动过程中，一直触发scroll事件，会导致
+// 无法监听到某些滚动值，当在首尾临界值无法监听到时，这是致命的，因为错失这些值会导致滑块无法回到起点和终点
+// 所以这里需要对临界值做监听并处理
+function scrolltolower(event, ownerInstance) {
+	ownerInstance.callMethod('scrollEvent', 'right')
+	// 获取当前组件的dataset
+	var dataset = event.currentTarget.dataset
+	// 指示器和滑块的宽度
+	var indicatorWidth = dataset.indicatorWidth || dataset.indicatorwidth || 0
+	var barWidth = dataset.barWidth || dataset.barwidth || 0
+	// scroll-view滚动到右边终点时，将滑块也设置为到右边的终点，它所需移动的距离为：指示器宽度 - 滑块宽度
+	setBarStyle(ownerInstance, indicatorWidth - barWidth)
+}
+
+function scrolltoupper(event, ownerInstance) {
+	ownerInstance.callMethod('scrollEvent', 'left')
+	// 滚动到左边时，将滑块设置为0的偏移距离，回到起点
+	setBarStyle(ownerInstance, 0)
+}
+
+function setBarStyle(ownerInstance, x) {
+	ownerInstance.selectComponent('.up-scroll-list__indicator-line-bar') && ownerInstance.selectComponent('.up-scroll-list__indicator-line-bar').setStyle({
+		transform: 'translateX(' + x + 'px)'
+	})
+}
+
+module.exports = {
+	scroll: scroll,
+	scrolltolower: scrolltolower,
+	scrolltoupper: scrolltoupper
+}