uview-ultra-plus 1.0.0

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

@@ -0,0 +1,598 @@
+<template>
+	<view ref="up-index-list" class="up-index-list">
+		<!-- #ifdef APP-NVUE -->
+		<list
+			:scrollTop="scrollTop"
+			enable-back-to-top
+			:offset-accuracy="1"
+			:style="{
+				maxHeight: addUnit(scrollViewHeight)
+			}"
+			@scroll="scrollHandler"
+			ref="up-index-list__scroll-view"
+			class="up-index-list__scroll-view"
+		>
+			<cell
+				v-if="$slots.header"
+				ref="header"
+			>
+				<slot name="header" />
+			</cell>
+			<slot />
+			<cell v-if="$slots.footer">
+				<slot name="footer" />
+			</cell>
+		</list>
+		<!-- #endif -->
+		<!-- #ifndef APP-NVUE -->
+		<scroll-view
+			:scrollTop="scrollTop"
+			:scrollIntoView="scrollIntoView"
+			:offset-accuracy="1"
+			:style="{
+				maxHeight: addUnit(scrollViewHeight)
+			}"
+			scroll-y
+			@scroll="scrollHandler"
+			ref="up-index-list__scroll-view"
+			class="up-index-list__scroll-view"
+		>
+			<view class="up-index-list__header" v-if="$slots.header">
+				<slot name="header" />
+			</view>
+			<slot />
+			<view class="up-index-list__footer" v-if="$slots.footer">
+				<slot name="footer" />
+			</view>
+		</scroll-view>
+		<!-- #endif -->
+		<view
+			class="up-index-list__letter"
+			ref="up-index-list__letter"
+			:style="{top: addUnit(letterInfo.top) , transform: 'translateY(-50%)'}"
+			@touchstart.prevent="touchStart"
+			@touchmove.prevent="touchMove"
+			@touchend.prevent="touchEnd"
+			@touchcancel.prevent="touchEnd"
+		>
+			<view
+				class="up-index-list__letter__item"
+				v-for="(item, index) in uIndexList"
+				:key="index"
+				:style="{
+					backgroundColor: activeIndex === index ? activeColor : 'transparent'
+				}"
+			>
+				<text
+					class="up-index-list__letter__item__index"
+					:style="{color: activeIndex === index ? '#fff' : inactiveColor}"
+				>{{ item.key || item }}</text>
+			</view>
+		</view>
+		<u-transition
+			mode="fade"
+			:show="touching"
+			:customStyle="{
+				position: 'absolute',
+				right: '50px',
+				top: addUnit(indicatorTop, 'px'),
+				zIndex: 3
+			}"
+		>
+			<view
+				class="up-index-list__indicator"
+				:class="['up-index-list__indicator--show']"
+				:style="{
+					height: addUnit(indicatorHeight),
+					width: addUnit(indicatorHeight)
+				}"
+			>
+				<text class="up-index-list__indicator__text">{{ uIndexList[activeIndex]?.key || uIndexList[activeIndex] }}</text>
+			</view>
+		</u-transition>
+	</view>
+</template>
+
+<script>
+	const indexList = () => {
+		const indexList = [];
+		const charCodeOfA = 'A'.charCodeAt(0);
+		for (let i = 0; i < 26; i++) {
+			indexList.push(String.fromCharCode(charCodeOfA + i));
+		}
+		return indexList;
+	}
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, getWindowInfo, sleep, getPx } from '../../libs/function/index';
+
+	// #ifdef APP-NVUE
+	// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	/**
+	 * IndexList 索引列表
+	 * @description  通过折叠面板收纳内容区域
+	 * @tutorial https://uview-plus.jiangruyi.com/components/indexList.html
+	 * @property {String}			inactiveColor	右边锚点非激活的颜色 ( 默认 '#606266' )
+	 * @property {String}			activeColor		右边锚点激活的颜色 ( 默认 '#5677fc' )
+	 * @property {Array}			indexList		索引字符列表，数组形式
+	 * @property {Boolean}			sticky			是否开启锚点自动吸顶 ( 默认 true )
+	 * @property {String | Number}	customNavHeight	自定义导航栏的高度 ( 默认 0 )
+	 * */ 
+	export default {
+		name: 'up-index-list',
+		mixins: [mpMixin, mixin, props],
+		// #ifdef MP-WEIXIN
+		// 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
+		options: {
+			virtualHost: true
+		},
+		// #endif
+		data() {
+			return {
+				// 当前正在被选中的字母索引
+				activeIndex: -1,
+				touchmoveIndex: 1,
+				// 索引字母的信息
+				letterInfo: {
+					height: 0,
+					itemHeight: 0,
+					top: 0
+				},
+				// 设置字母指示器的高度，后面为了让指示器跟随字母，并将尖角部分指向字母的中部，需要依赖此值
+				indicatorHeight: 50,
+				// 字母放大指示器的top值，为了让其指向当前激活的字母
+				// indicatorTop: 0
+				// 当前是否正在被触摸状态
+				touching: false,
+				// 滚动条顶部top值
+				scrollTop: 0,
+				// scroll-view的高度
+				scrollViewHeight: 0,
+				// 系统信息
+				sys: {},
+				scrolling: false,
+				scrollIntoView: '',
+				pageY: 0,
+				topOffset: 0,
+				indicatorText: ''
+			}
+		},
+		computed: {
+			// 如果有传入外部的indexList锚点数组则使用，否则使用内部生成A-Z字母
+			uIndexList() {
+				return this.indexList.length ? this.indexList : indexList()
+			},
+			// 字母放大指示器的top值，为了让其指向当前激活的字母
+			indicatorTop() {
+				const {
+					top,
+					height,
+					itemHeight
+				} = this.letterInfo
+				return Math.floor(top - (height / 2) + itemHeight * this.activeIndex + itemHeight - 70 / 2)
+			}
+		},
+		watch: {
+			// 监听字母索引的变化，重新设置尺寸
+			uIndexList: {
+				immediate: false,
+				handler() {
+					sleep(30).then(() => {
+						this.setIndexListLetterInfo()
+					})
+				}
+			}
+		},
+		created() {
+			this.children = []
+			this.anchors = []
+			this.sys = getWindowInfo()
+		},
+		mounted() {
+			this.init()
+			sleep(50).then(() => {
+				this.setIndexListLetterInfo()
+			})
+		},
+		methods: {
+			addUnit,
+			init() {
+				// 设置列表的高度为整个屏幕的高度
+				//减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
+				//解决当up-index-list组件放在tabbar页面时,scroll-view内容较少时，还能滚动
+				let customNavHeight = getPx(this.customNavHeight)
+				// this.scrollViewHeight = this.sys.windowHeight - customNavHeight
+				this.getIndexListRect().then(async sizeScroll => {
+					this.scrollViewHeight = sizeScroll.height ? sizeScroll.height : this.sys.windowHeight - customNavHeight
+					this.topOffset = this.sys.windowHeight - this.scrollViewHeight
+					// console.log('scrollViewHeight', this.scrollViewHeight)
+					// console.log('topOffset', this.topOffset)
+				})
+			},
+			// 索引列表被触摸
+			touchStart(e) {
+				// 获取触摸点信息
+				const touchStartData = e.changedTouches[0]
+				if (!touchStartData) return
+				this.touching = true
+				const {
+					pageY,
+					screenY
+				} = touchStartData
+				// 根据当前触摸点的坐标，获取当前触摸的为第几个字母
+				// #ifdef APP-NVUE
+				// 使用screenY要减去导航栏44和状态栏24高度
+				const currentIndex = this.getIndexListLetter(screenY - 68)
+				// #endif
+				// #ifndef APP-NVUE
+				const currentIndex = this.getIndexListLetter(pageY)
+				// #endif
+				this.setValueForTouch(currentIndex)
+			},
+			// 索引字母列表被触摸滑动中
+			touchMove(e) {
+				// 获取触摸点信息
+				let touchMove = e.changedTouches[0]
+				if (!touchMove) return;
+
+				// 滑动结束后迅速开始第二次滑动时候 touching 为 false 造成不显示 indicator 问题
+				if (!this.touching) {
+					this.touching = true
+				}
+				const {
+					pageY,
+					screenY
+				} = touchMove
+				// #ifdef APP-NVUE
+				// 使用screenY要减去导航栏44和状态栏24高度
+				const currentIndex = this.getIndexListLetter(screenY - 68)
+				// #endif
+				// #ifndef APP-NVUE
+				const currentIndex = this.getIndexListLetter(pageY)
+				// #endif
+
+				this.setValueForTouch(currentIndex)
+			},
+			// 触摸结束
+			touchEnd(e) {
+				// 延时一定时间后再隐藏指示器，为了让用户看的更直观，同时也是为了消除快速切换u-transition的show带来的影响
+				sleep(300).then(() => {
+					this.touching = false
+				})
+			},
+			// 获取索引列表的尺寸以及单个字符的尺寸信息
+			getIndexListLetterRect() {
+				return new Promise(resolve => {
+					// 延时一定时间，以获取dom尺寸
+					// #ifndef APP-NVUE
+					this.$uGetRect('.up-index-list__letter').then(size => {
+						resolve(size)
+					})
+					// #endif
+
+					// #ifdef APP-NVUE
+					const ref = this.$refs['up-index-list__letter']
+					dom.getComponentRect(ref, res => {
+						resolve(res.size)
+					})
+					// #endif
+				})
+			},
+			getIndexListScrollViewRect() {
+				return new Promise(resolve => {
+					// 延时一定时间，以获取dom尺寸
+					// #ifndef APP-NVUE
+					this.$nextTick(() => {
+						this.$uGetRect('.up-index-list__scroll-view').then(size => {
+							resolve(size)
+						})
+					})
+					// #endif
+
+					// #ifdef APP-NVUE
+					const ref = this.$refs['up-index-list__scroll-view']
+					dom.getComponentRect(ref, res => {
+						resolve(res.size)
+					})
+					// #endif
+				})
+			},
+			getIndexListRect() {
+				return new Promise(resolve => {
+					// 延时一定时间，以获取dom尺寸
+					// #ifndef APP-NVUE
+					this.$uGetRect('.up-index-list').then(size => {
+						resolve(size)
+					})
+					// #endif
+
+					// #ifdef APP-NVUE
+					const ref = this.$refs['up-index-list']
+					dom.getComponentRect(ref, res => {
+						resolve(res.size)
+					})
+					// #endif
+				})
+			},
+			// 设置indexList索引的尺寸信息
+			setIndexListLetterInfo() {
+				this.getIndexListLetterRect().then(size => {
+					// console.log('getIndexListLetterRect', size)
+					const {
+						height
+					} = size
+					const sysData = getWindowInfo()
+					const windowHeight = sysData.windowHeight
+					let customNavHeight = 0
+					// 消除各端导航栏非原生和原生导致的差异，让索引列表字母对屏幕垂直居中
+					if (this.customNavHeight == 0) {
+						// #ifdef H5
+						customNavHeight = sysData.windowTop
+						// #endif
+						// #ifndef H5
+						// 在非H5中，为原生导航栏，其高度不算在windowHeight内，这里设置为负值，后面相加时变成减去其高度的一半
+						customNavHeight = -(sysData.statusBarHeight + 44)
+						// #endif
+					} else {
+						customNavHeight = getPx(this.customNavHeight)
+					}
+					this.getIndexListScrollViewRect().then(sizeScroll => {
+						// console.log('sizeScroll', sizeScroll)
+						this.letterInfo = {
+							height,
+							// 为了让字母列表对屏幕绝对居中，让其对导航栏进行修正，也即往上偏移导航栏的一半高度
+							top: sizeScroll.height / 2,
+							// top: (this.scrollViewHeight - height) / 2 + customNavHeight / 2,
+							itemHeight: Math.floor(height / this.uIndexList.length)
+						}
+					})
+				})
+			},
+			// 获取当前被触摸的索引字母
+			getIndexListLetter(pageY) {
+				this.pageY = pageY
+				let {
+					top,
+					height,
+					itemHeight
+				} = this.letterInfo
+				let index = this.currentIndex;
+				// 对H5的pageY进行修正，这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
+				// #ifdef H5
+				// pageY += getWindowInfo().windowTop
+				// #endif
+				// 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
+				// console.log('top1', top)
+				// console.log('height', height)
+				top = top - (height / 2) // 减去transfrom的translateY值导致的高度
+				pageY = pageY - this.topOffset
+				// if (this.safeBottomFix) {
+				// 	pageY = pageY + 34
+				// }
+				// console.log('topOffset', this.topOffset)
+				// console.log('pageY', pageY)
+				// console.log('top2', top)
+				if (pageY < top) {
+					index = 0
+				} else if (pageY >= top + height) {
+					// 如果超出了，取最后一个字母
+					index = this.uIndexList.length - 1
+				} else {
+					// 将触摸点的Y轴偏移值，减去索引字母的top值，除以每个字母的高度，即可得到当前触摸点落在哪个字母上
+					index = Math.floor((pageY - top) / itemHeight)
+				}
+				// console.log(index)
+				return index
+			},
+			// 设置各项由触摸而导致变化的值
+			async setValueForTouch(currentIndex) {
+				// 如果偏移量太小，前后得出的会是同一个索引字母，为了防抖，进行返回
+				if (currentIndex === this.activeIndex) return
+				this.activeIndex = currentIndex
+				this.$emit('select', this.uIndexList[currentIndex])
+				// #ifndef APP-NVUE || MP-WEIXIN
+				// 在非nvue中，由于anchor和item都在up-index-item中，所以需要对index-item进行偏移
+				if (typeof this.uIndexList[currentIndex] == 'string') {
+					this.scrollIntoView = `up-index-item-${this.uIndexList[currentIndex].charCodeAt(0)}`
+				} else {
+					this.scrollIntoView = `up-index-item-${this.uIndexList[currentIndex].name.charCodeAt(0)}`
+				}
+				// #endif
+
+				// #ifdef MP-WEIXIN
+				// 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
+				const customNavHeight = this.customNavHeight
+
+				// 获取header slot的尺寸信息
+				const header = await this.getHeaderRect()
+				// item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
+				let top = header.height
+				// console.log(top)
+				const anchors = this.anchors
+				// 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
+				let children = this.children.map((item, index) => {
+					const childHeight = item.height + getPx(this.itemMargin)
+					const child = {
+						height: childHeight,
+						top: top
+					}
+					// 进行累加，给下一个item提供计算依据
+					top = top + childHeight
+					// #ifdef APP-NVUE
+					// 只有nvue下，需要将锚点的高度也累加，非nvue下锚点高度是包含在index-item中的。
+					top = top + anchors[index].height
+					// #endif
+					return child
+				})
+				// console.log('this.children[currentIndex].top', children[currentIndex].top)
+				if (children[currentIndex]?.top || children[currentIndex].top === 0) {
+					this.scrollTop = children[currentIndex].top - getPx(customNavHeight)
+				}
+				// #endif
+
+				// #ifdef APP-NVUE
+				// 在nvue中，由于cell和header为同级元素，所以实际是需要对header(anchor)进行偏移
+				const anchor = `up-index-anchor-${this.uIndexList[currentIndex]}`
+				// console.log(anchor)
+				dom.scrollToElement(this.anchors[currentIndex].$refs[anchor], {
+					offset: 0,
+					animated: false
+				})
+				// #endif
+			},
+			getHeaderRect() {
+				// 获取header slot的高度，因为list组件中获取元素的尺寸是没有top值的
+				return new Promise(resolve => {
+					if (!this.$slots.header) {
+						resolve({
+							width: 0,
+							height: 0
+						})
+					}
+
+					// #ifndef APP-NVUE
+					this.$uGetRect('.up-index-list__header').then(size => {
+						resolve(size)
+					})
+					// #endif
+
+					// #ifdef APP-NVUE
+					let headerRef = this.$refs.header
+					if (!headerRef) {
+						resolve({
+							width: 0,
+							height: 0
+						})
+					}
+					dom.getComponentRect(headerRef, res => {
+						resolve(res.size)
+					})
+					// #endif
+				})
+			},
+			// scroll-view的滚动事件
+			async scrollHandler(e) {
+				if (this.touching || this.scrolling) return
+				// 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
+				this.scrolling = true
+				sleep(10).then(() => {
+					this.scrolling = false
+				})
+				let scrollTop = 0
+				const len = this.children.length
+				let children = this.children
+				// #ifdef APP-NVUE
+				// nvue下获取的滚动条偏移为负数，需要转为正数
+				let sys = getWindowInfo()
+				scrollTop = Math.abs(e.contentOffset.y) / 10
+				// console.log('native', e)
+				// #endif
+
+				// 获取header slot的尺寸信息
+				const header = await this.getHeaderRect()
+				// item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
+				let top = header.height
+				const anchors = this.anchors
+				// 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
+				children = this.children.map((item, index) => {
+					const childHeight = item.height + getPx(this.itemMargin)
+					const child = {
+						height: childHeight,
+						top: top
+					}
+					// 进行累加，给下一个item提供计算依据
+					top = top + childHeight
+					// #ifdef APP-NVUE
+					// 只有nvue下，需要将锚点的高度也累加，非nvue下锚点高度是包含在index-item中的。
+					top = top + anchors[index].height
+					// #endif
+					return child
+				})
+				
+				// #ifndef APP-NVUE
+				// 非nvue通过detail获取滚动条位移
+				scrollTop = e.detail.scrollTop
+				// console.log('scrollTop', scrollTop, this.customNavHeight)
+				// #endif
+				// 在弹窗中需要加上弹窗距离顶部的高度topOffset
+				scrollTop = scrollTop + getPx(this.customNavHeight)
+				for (let i = 0; i < len; i++) {
+					const item = children[i],
+						nextItem = children[i + 1]
+					// 如果滚动条高度小于第一个item的top值，此时无需设置任意字母为高亮
+					if (scrollTop <= children[0].top || scrollTop >= children[len - 1].top + children[len - 1].height) {
+						this.activeIndex = -1
+						break
+					} else if (!nextItem) {
+						// 当不存在下一个item时，意味着历遍到了最后一个
+						this.activeIndex = len - 1
+						break
+					} else if (scrollTop > item.top && scrollTop < nextItem.top) {
+						this.activeIndex = i
+						break
+					}
+				}
+			},
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.up-index-list {
+
+		&__letter {
+			position: absolute;
+			right: 0;
+			text-align: center;
+			z-index: 3;
+			padding: 0 6px;
+			width: 30px;
+
+			&__item {
+				width: 16px;
+				height: 16px;
+				border-radius: 100px;
+				margin: 1px 0;
+				@include flex;
+				align-items: center;
+				justify-content: center;
+
+				&--active {
+					background-color: $u-primary;
+				}
+
+				&__index {
+					font-size: 12px;
+					text-align: center;
+					line-height: 12px;
+				}
+			}
+		}
+
+		&__indicator {
+			width: 50px;
+			height: 50px;
+			border-radius: 100px 100px 0 100px;
+			text-align: center;
+			color: #ffffff;
+			background-color: #c9c9c9;
+			transform: rotate(-45deg);
+			@include flex;
+			justify-content: center;
+			align-items: center;
+
+			&__text {
+				font-size: 28px;
+				line-height: 28px;
+				font-weight: bold;
+				color: #fff;
+				transform: rotate(45deg);
+				text-align: center;
+			}
+		}
+	}
+</style>

package/uview-ultra/components/up-input/input.js

@@ -0,0 +1,48 @@
+/*
+ * @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/input.js
+ */
+export default {
+	// index 组件
+	input: {
+		value: '',
+		type: 'text',
+		fixed: false,
+		disabled: false,
+		disabledColor: '#f5f7fa',
+		clearable: false,
+		password: false,
+		maxlength: 140,
+		placeholder: null,
+		placeholderClass: 'input-placeholder',
+		placeholderStyle: 'color: #c0c4cc',
+		showWordLimit: false,
+		confirmType: 'done',
+		confirmHold: false,
+		holdKeyboard: false,
+		focus: false,
+		autoBlur: false,
+		disableDefaultPadding: false,
+		cursor: -1,
+		cursorSpacing: 30,
+		selectionStart: -1,
+		selectionEnd: -1,
+		adjustPosition: true,
+		inputAlign: 'left',
+		fontSize: '15px',
+		color: '#303133',
+		prefixIcon: '',
+		prefixIconStyle: '',
+		suffixIcon: '',
+		suffixIconStyle: '',
+		border: 'surround',
+		readonly: false,
+		shape: 'square',
+		formatter: null
+	}
+}

package/uview-ultra/components/up-input/input.uts

@@ -0,0 +1,49 @@
+/*
+ * @Author       : jry
+ * @Description  :
+ * @version      : 4.0
+ * @Date         : 2024-08-28 22:58:58
+ * @LastAuthor   : jry
+ * @lastTime     : 2024-08-28 22:58:58
+ * @FilePath     : /uview-ultra/libs/config/props/input.js
+ */
+export default {
+	// index 组件
+	input: {
+		value: '',
+		type: 'text',
+		fixed: false,
+		disabled: false,
+		disabledColor: '#f5f7fa',
+		clearable: false,
+		password: false,
+		maxlength: 140,
+		placeholder: '',
+		placeholderClass: 'input-placeholder',
+		placeholderStyle: 'color: #c0c4cc',
+		showWordLimit: false,
+		confirmType: 'done',
+		confirmHold: false,
+		holdKeyboard: false,
+		focus: false,
+		autoBlur: false,
+		disableDefaultPadding: false,
+		cursor: -1,
+		cursorSpacing: 30,
+		selectionStart: -1,
+		selectionEnd: -1,
+		adjustPosition: true,
+		inputAlign: 'left',
+		fontSize: '15px',
+		color: '#303133',
+		prefixIcon: '',
+		prefixIconStyle: '',
+		suffixIcon: '',
+		suffixIconStyle: '',
+		border: 'surround',
+		readonly: false,
+		shape: 'square',
+		ignoreCompositionEvent: true,
+		formatter: function() {}
+	}
+} as UTSJSONObject