uview-ultra-plus 1.0.0

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

@@ -0,0 +1,221 @@
+<template>
+	<view
+		class="up-sticky"
+		:style="[style]"
+	>
+		<view
+		:id="elId"
+			:style="[stickyContent]"
+			class="up-sticky__content"
+		>
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	import { props } from './props';
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, addStyle, deepMerge, getPx, guid, getDeviceInfo, os } from '../../libs/function/index';
+	import zIndex from '../../libs/config/zIndex';
+	/**
+	 * sticky 吸顶
+	 * @description 该组件与CSS中position: sticky属性实现的效果一致，当组件达到预设的到顶部距离时， 就会固定在指定位置，组件位置大于预设的顶部距离时，会重新按照正常的布局排列。
+	 * @tutorial https://uview-plus.jiangruyi.com/components/sticky.html
+	 * @property {String ｜ Number}	offsetTop		吸顶时与顶部的距离，单位px（默认 0 ）
+	 * @property {String ｜ Number}	customNavHeight	自定义导航栏的高度 （h5 默认44  其他默认 0 ）
+	 * @property {Boolean}			disabled		是否开启吸顶功能 （默认 false ）
+	 * @property {String}			bgColor			组件背景颜色（默认 '#ffffff' ）
+	 * @property {String ｜ Number}	zIndex			吸顶时的z-index值
+	 * @property {String ｜ Number}	index			自定义标识，用于区分是哪一个组件
+	 * @property {Object}			customStyle		组件的样式，对象形式
+	 * @event {Function} fixed		组件吸顶时触发
+	 * @event {Function} unfixed	组件取消吸顶时触发
+	 * @example <up-sticky offsetTop="200"><view>塞下秋来风景异，衡阳雁去无留意</view></up-sticky>
+	 */
+	export default {
+		name: 'up-sticky',
+		mixins: [mpMixin, mixin, props],
+		data() {
+			return {
+				cssSticky: false, // 是否使用css的sticky实现
+				stickyTop: 0, // 吸顶的top值，因为可能受自定义导航栏影响，最终的吸顶值非offsetTop值
+				elId: guid(),
+				left: 0, // js模式时，吸顶的内容因为处于postition: fixed模式，为了和原来保持一致的样式，需要记录并重新设置它的left，height，width属性
+				width: 'auto',
+				height: 'auto',
+				fixed: false, // js模式时，是否处于吸顶模式
+			}
+		},
+		computed: {
+			style() {
+				const style = {}
+				if(!this.disabled) {
+					if (this.cssSticky) {
+						style.position = 'sticky'
+						style.zIndex = this.uZindex
+						style.top = addUnit(this.stickyTop)
+					} else {
+						style.height = this.fixed ? this.height + 'px' : 'auto'
+					}
+				} else {
+					// 无需吸顶时，设置会默认的relative(nvue)和非nvue的static静态模式即可
+					// #ifdef APP-NVUE
+					style.position = 'relative'
+					// #endif
+					// #ifndef APP-NVUE
+					style.position = 'static'
+					// #endif
+				}
+				style.backgroundColor = this.bgColor
+				return deepMerge(addStyle(this.customStyle), style)
+			},
+			// 吸顶内容的样式
+			stickyContent() {
+				const style = {}
+				if (!this.cssSticky) {
+					style.position = this.fixed ? 'fixed' : 'static'
+					style.top = this.stickyTop + 'px'
+					style.left = this.left + 'px'
+					style.width = this.width == 'auto' ? 'auto' : this.width + 'px'
+					style.zIndex = this.uZindex
+				}
+				return style
+			},
+			uZindex() {
+				return this.zIndex ? this.zIndex : zIndex.sticky
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		watch: {
+			offsetTop(nval) {
+				this.getStickyTop()
+			}
+		},
+		methods: {
+			init() {
+				this.getStickyTop()
+				// 判断使用的模式
+				this.checkSupportCssSticky()
+				// 如果不支持css sticky，则使用js方案，此方案性能比不上css方案
+				if (!this.cssSticky) {
+					!this.disabled && this.initObserveContent()
+				}
+			},
+			initObserveContent() {
+				// 获取吸顶内容的高度，用于在js吸顶模式时，给父元素一个填充高度，防止"塌陷"
+				this.$uGetRect('#' + this.elId).then((res) => {
+					this.height = res.height
+					this.left = res.left
+					this.width = res.width
+					this.$nextTick(() => {
+						this.observeContent()
+					})
+				})
+			},
+			observeContent() {
+				// 先断掉之前的观察
+				this.disconnectObserver('contentObserver')
+				const contentObserver = uni.createIntersectionObserver(this,{
+					// 检测的区间范围
+					thresholds: [0.95, 0.98, 1]
+				})
+				// 到屏幕顶部的高度时触发
+				contentObserver.relativeToViewport({
+					top: -this.stickyTop
+				})
+				// 绑定观察的元素
+				contentObserver.observe(`#${this.elId}`, res => {
+					this.setFixed(res.boundingClientRect.top)
+				})
+				this.contentObserver = contentObserver
+			},
+			setFixed(top) {
+				// 判断是否出于吸顶条件范围
+				const fixed = top <= this.stickyTop
+				this.fixed = fixed
+			},
+			disconnectObserver(observerName) {
+				// 断掉观察，释放资源
+				const observer = this[observerName]
+				observer && observer.disconnect()
+			},
+			getStickyTop() {
+				this.stickyTop = getPx(this.offsetTop) + getPx(this.customNavHeight)
+			},
+			async checkSupportCssSticky() {
+				// #ifdef H5
+				// H5，一般都是现代浏览器，是支持css sticky的，这里使用创建元素嗅探的形式判断
+				if (this.checkCssStickyForH5()) {
+					this.cssSticky = true
+				}
+				// #endif
+
+				// 如果安卓版本高于8.0，依然认为是支持css sticky的(因为安卓7在某些机型，可能不支持sticky)
+				if (os() === 'android' && Number(getDeviceInfo().system) > 8) {
+					this.cssSticky = true
+				}
+
+				// APP-Vue和微信平台，通过computedStyle判断是否支持css sticky
+				// #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO
+				this.cssSticky = await this.checkComputedStyle()
+				// #endif
+
+				// ios上，从ios6开始，都是支持css sticky的
+				if (os() === 'ios') {
+					this.cssSticky = true
+				}
+
+				// nvue，是支持css sticky的
+				// #ifdef APP-NVUE
+				this.cssSticky = true
+				// #endif
+			},
+			// 在APP和微信小程序上，通过uni.createSelectorQuery可以判断是否支持css sticky
+			checkComputedStyle() {
+				// 方法内进行判断，避免在其他平台生成无用代码
+				// #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO
+				return new Promise(resolve => {
+					uni.createSelectorQuery().in(this).select('.up-sticky').fields({
+						computedStyle: ["position"]
+					}).exec(e => {
+						resolve('sticky' === e[0].position)
+					})
+				})
+				// #endif
+			},
+			// H5通过创建元素的形式嗅探是否支持css sticky
+			// 判断浏览器是否支持sticky属性
+			checkCssStickyForH5() {
+				// 方法内进行判断，避免在其他平台生成无用代码
+				// #ifdef H5
+				const vendorList = ['', '-webkit-', '-ms-', '-moz-', '-o-'],
+					vendorListLength = vendorList.length,
+					stickyElement = document.createElement('div')
+				for (let i = 0; i < vendorListLength; i++) {
+					stickyElement.style.position = vendorList[i] + 'sticky'
+					if (stickyElement.style.position !== '') {
+						return true
+					}
+				}
+				return false;
+				// #endif
+			}
+		},
+		beforeUnmount() {
+			this.disconnectObserver('contentObserver')
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.up-sticky {
+		/* #ifdef APP-VUE || MP-WEIXIN || MP-TOUTIAO */
+		// 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
+		position: sticky;
+		/* #endif */
+	}
+</style>

package/uview-ultra/components/up-subsection/props.js

@@ -0,0 +1,51 @@
+import { defineMixin } from '../../libs/vue.js'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // tab的数据
+        list: {
+            type: Array,
+            default: () => defProps.subsection.list
+        },
+        // 当前活动的tab的index
+        current: {
+            type: [String, Number],
+            default: () => defProps.subsection.current
+        },
+        // 激活的颜色
+        activeColor: {
+            type: String,
+            default: () => defProps.subsection.activeColor
+        },
+        // 未激活的颜色
+        inactiveColor: {
+            type: String,
+            default: () => defProps.subsection.inactiveColor
+        },
+        // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+        mode: {
+            type: String,
+            default: () => defProps.subsection.mode
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: () => defProps.subsection.fontSize
+        },
+        // 激活tab的字体是否加粗
+        bold: {
+            type: Boolean,
+            default: () => defProps.subsection.bold
+        },
+        // mode = button时，组件背景颜色
+        bgColor: {
+            type: String,
+            default: () => defProps.subsection.bgColor
+        },
+		// 从list元素对象中读取的键名
+		keyName: {
+			type: String,
+			default: () => defProps.subsection.keyName
+		}
+    }
+})

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

@@ -0,0 +1,53 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from './subsection'
+let crtProp = defProps['subsection'] as UTSJSONObject
+
+export const subsectionProps = defineMixin({
+    props: {
+        // tab的数据
+        list: {
+            type: Array,
+            default: crtProp['list']
+        },
+        // 当前活动的tab的index
+        current: {
+            type: [String, Number],
+            default: crtProp['current']
+        },
+        // 激活的颜色
+        activeColor: {
+            type: String,
+            default: crtProp['activeColor']
+        },
+        // 未激活的颜色
+        inactiveColor: {
+            type: String,
+            default: crtProp['inactiveColor']
+        },
+        // 模式选择，mode=button为按钮形式，mode=subsection时为分段模式
+        mode: {
+            type: String,
+            default: crtProp['mode']
+        },
+        // 字体大小
+        fontSize: {
+            type: [String, Number],
+            default: crtProp['fontSize']
+        },
+        // 激活tab的字体是否加粗
+        bold: {
+            type: Boolean,
+            default: crtProp['bold']
+        },
+        // mode = button时，组件背景颜色
+        bgColor: {
+            type: String,
+            default: crtProp['bgColor']
+        },
+		// 从list元素对象中读取的键名
+		keyName: {
+			type: String,
+			default: crtProp['keyName']
+		}
+    }
+})

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

@@ -0,0 +1,23 @@
+/*
+ * @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/subsection.js
+ */
+export default {
+    // subsection组件
+    subsection: {
+        list: [],
+        current: 0,
+        activeColor: '#3c9cff',
+        inactiveColor: '#303133',
+        mode: 'button',
+        fontSize: 12,
+        bold: true,
+        bgColor: '#eeeeef',
+		keyName: 'name'
+    }
+}

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

@@ -0,0 +1,23 @@
+/*
+ * @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/subsection.js
+ */
+export default {
+    // subsection组件
+    subsection: {
+        list: [] as Array<any>,
+        current: 0,
+        activeColor: '#3c9cff',
+        inactiveColor: '#303133',
+        mode: 'button',
+        fontSize: '12px',
+        bold: true,
+        bgColor: '#eeeeef',
+		keyName: 'name'
+    }
+} as UTSJSONObject

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

@@ -0,0 +1,301 @@
+<template>
+    <view
+        class="up-subsection"
+        ref="up-subsection"
+        :class="[`up-subsection--${mode}`]"
+        :style="[addStyle(customStyle), wrapperStyle]"
+    >
+        <view
+            class="up-subsection__bar cursor-pointer"
+            ref="up-subsection__bar"
+            :style="[barStyle]"
+            :class="{
+				'up-subsection--button__bar': mode === 'button',
+				'up-subsection__bar--first': (innerCurrent === 0 && mode === 'subsection'),
+				'up-subsection__bar--center': (innerCurrent > 0 && innerCurrent < list.length - 1 && mode === 'subsection'),
+				'up-subsection__bar--last': (innerCurrent === list.length - 1 && mode === 'subsection')
+			}"
+        ></view>
+        <view
+            class="up-subsection__item cursor-pointer"
+            :class="[
+                `up-subsection__item--${index.toString()}`,
+                index < list.length - 1 ? 
+                    'up-subsection__item--no-border-right' : '',
+                index === 0 ? 'up-subsection__item--first' : '',
+                index === list.length - 1 ? 'up-subsection__item--last' : ''
+            ]"
+            :ref="`up-subsection__item--${index.toString()}`"
+            :style="[itemStyle(index)]"
+            @tap="clickHandler(index)"
+            v-for="(item, index) in list"
+            :key="index"
+        >
+			<slot name="item" :item="item" :index="index">
+				<text
+				    class="up-subsection__item__text"
+				    :style="[textStyle(index)]"
+				    >{{ getText(item) }}</text
+				>
+			</slot>
+        </view>
+    </view>
+</template>
+
+<script>
+import { subsectionProps } from "./props";
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, sleep } from '../../libs/function/index';
+/**
+ * Subsection 分段器
+ * @description 该分段器一般用于用户从几个选项中选择某一个的场景
+ * @tutorial https://ijry.github.io/uview-plus/components/subsection.html
+ * @property {Array}			list			tab的数据
+ * @property {String ｜ Number}	current			当前活动的tab的index（默认 0 ）
+ * @property {String}			activeColor		激活时的颜色（默认 '#3c9cff' ）
+ * @property {String}			inactiveColor	未激活时的颜色（默认 '#303133' ）
+ * @property {String}			mode			模式选择，mode=button为按钮形式，mode=subsection时为分段模式（默认 'button' ）
+ * @property {String ｜ Number}	fontSize		字体大小，单位px（默认 12px ）
+ * @property {Boolean}			bold			激活选项的字体是否加粗（默认 true ）
+ * @property {String}			bgColor			组件背景颜色，mode为button时有效（默认 '#eeeeef' ）
+ * @property {Object}			customStyle		定义需要用到的外部样式
+ * @property {String}	        keyName	        从`list`元素对象中读取的键名（默认 'name' ）
+ *
+ * @event {Function} change		分段器选项发生改变时触发  回调 index：选项的index索引值，从0开始
+ * @example <up-subsection :list="list" :current="curNow" @change="sectionChange"></up-subsection>
+ */
+export default {
+    name: "up-subsection",
+    mixins: [
+		mpMixin, mixin,
+		subsectionProps
+	],
+    data() {
+        return {
+            // 组件尺寸
+            itemRect: {
+                width: 0,
+                height: 0,
+            } as NodeInfo,
+            innerCurrent: 0,
+            windowResizeCallback: {}
+        };
+    },
+    watch: {
+        list() {
+            this.init();
+        },
+        current: {
+            immediate: true,
+            handler(n: string | number) {
+				let nn = parseInt(n.toString())
+                if (nn !== this.innerCurrent) {
+                    this.innerCurrent = nn
+                }
+            },
+        },
+    },
+    computed: {
+        wrapperStyle() {
+            const style = {};
+            // button模式时，设置背景色
+            if (this.mode === "button") {
+                style['backgroundColor'] = this.bgColor;
+            }
+            return style;
+        },
+        // 滑块的样式
+        barStyle() {
+            const style = {};
+            style['width'] = `${this.itemRect['width']}px`;
+            style['height'] = `${this.itemRect['height']}px`;
+			// 通过translateX移动滑块，其移动的距离为索引*item的宽度
+			// #ifndef APP-NVUE
+			if (this.itemRect.width != null) {
+				style.transform = `translateX(${
+					// @ts-ignore
+				    this.innerCurrent * (this.itemRect['width'] as Number)
+				}px)`;
+			}
+			// #endif
+            if (this.mode === "subsection") {
+                // 在subsection模式下，需要动态设置滑块的圆角，因为移动滑块使用的是translateX，无法通过父元素设置overflow: hidden隐藏滑块的直角
+                style['backgroundColor'] = this.activeColor;
+            }
+            return style;
+        }
+    },
+    mounted() {
+        this.init();
+        // this.windowResizeCallback = (res) => {
+        //     this.init();
+        // }
+        // uni.onWindowResize(this.windowResizeCallback)
+    },
+    beforeUnmount() {
+        // uni.offWindowResize(this.windowResizeCallback)
+    },
+	emits: ["change"],
+    methods: {
+        addStyle(e: any) {
+        	return addStyle(e);
+        },
+        addUnit(e: any) {
+        	return addUnit(e);
+        },
+        async init() {
+			// @ts-ignore
+            this.innerCurrent = parseInt(this.current.toString())
+			await sleep(30);
+			this.getRect();
+        },
+		itemStyle(index: number) {
+			const style = {};
+			if (this.mode === "subsection") {
+				// 设置border的样式
+				style['borderColor'] = this.activeColor;
+				style['borderWidth'] = "1px";
+				style['borderStyle'] = "solid";
+			}
+			return style;
+		},
+		textStyle(index: number) {
+			const style = {};
+			style['fontWeight'] =
+				this.bold && this.innerCurrent === index ? "bold" : "normal";
+			style['fontSize'] = addUnit(this.fontSize);
+			// subsection模式下，激活时默认为白色的文字
+			if (this.mode === "subsection") {
+				style['color'] =
+					this.innerCurrent === index ? "#fff" : this.inactiveColor;
+			} else {
+				// button模式下，激活时文字颜色默认为activeColor
+				style['color'] =
+					this.innerCurrent === index
+						? this.activeColor
+						: this.inactiveColor;
+			}
+			return style;
+		},
+		// 判断展示文本
+		getText(item: any|null): string|null {
+			if (typeof item === 'string') {
+				return item;
+			} else if (typeof item === 'object') {
+				let temp = JSON.parse(JSON.stringify(item)) as UTSJSONObject;
+				return temp.getString(this.keyName);
+			} else {
+				return "error";
+			}
+		},
+        // 获取组件的尺寸
+        getRect() {
+            // #ifndef APP-NVUE
+			// @ts-ignore
+            this.upGetRect(".up-subsection__item--0", false).then((res) => {
+				let size = res as NodeInfo;
+                this.itemRect = size;
+            });
+            // #endif
+        },
+        clickHandler(index: number) {
+            this.innerCurrent = index
+            this.$emit("change", index);
+        }
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../libs/css/components.scss";
+
+.up-subsection {
+    @include flex;
+    position: relative;
+    overflow: hidden;
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	box-sizing: border-box;
+	/* #endif */
+
+    &--button {
+        height: 34px;
+        background-color: rgb(238, 238, 239);
+        padding: 3px;
+        border-radius: 4px;
+        align-items: stretch;
+
+        &__bar {
+            background-color: #ffffff;
+            border-radius: 4px !important;
+        }
+    }
+
+    &--subsection {
+        height: 32px;
+    }
+
+    &__bar {
+        position: absolute;
+        /* #ifndef APP-NVUE */
+        transition-property: transform, color;
+        transition-duration: 0.3s;
+        transition-timing-function: ease-in-out;
+        /* #endif */
+
+        &--first {
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+
+        &--center {
+            border-top-left-radius: 0px;
+            border-bottom-left-radius: 0px;
+            border-top-right-radius: 0px;
+            border-bottom-right-radius: 0px;
+        }
+
+        &--last {
+            border-top-left-radius: 0px;
+            border-bottom-left-radius: 0px;
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+    }
+
+    &__item {
+        @include flex;
+        flex: 1;
+        justify-content: center;
+        align-items: center;
+        // vue环境下，需要设置相对定位，因为滑块为绝对定位，item需要在滑块的上面
+        position: relative;
+
+        &--no-border-right {
+            border-right-width: 0 !important;
+        }
+
+        &--first {
+            border-top-left-radius: 4px;
+            border-bottom-left-radius: 4px;
+        }
+
+        &--last {
+            border-top-right-radius: 4px;
+            border-bottom-right-radius: 4px;
+        }
+
+        &__text {
+            font-size: 12px;
+            line-height: 14px;
+            // @include flex;
+            // align-items: center;
+            transition-property: color;
+            transition-duration: 0.3s;
+        }
+    }
+}
+</style>