From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 06 Nov 2023 08:48:39 +0800
Subject: [PATCH] fix:小程序订阅消息

---
 uni_modules/uview-ui/components/u-sticky/u-sticky.vue |  212 +++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 212 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-sticky/u-sticky.vue b/uni_modules/uview-ui/components/u-sticky/u-sticky.vue
new file mode 100644
index 0000000..ff74688
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-sticky/u-sticky.vue
@@ -0,0 +1,212 @@
+<template>
+	<view
+		class="u-sticky"
+		:id="elId"
+		:style="[style]"
+	>
+		<view
+			:style="[stickyContent]"
+			class="u-sticky__content"
+		>
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	import props from './props.js';;
+	/**
+	 * sticky ������
+	 * @description ������������CSS���position: sticky��������������������������������������������������������������������������� ������������������������������������������������������������������������������������������������������������������
+	 * @tutorial https://www.uviewui.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 <u-sticky offsetTop="200"><view>���������������������������������������������</view></u-sticky>
+	 */
+	export default {
+		name: 'u-sticky',
+		mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+		data() {
+			return {
+				cssSticky: false, // ������������css���sticky������
+				stickyTop: 0, // ���������top���������������������������������������������������������������������offsetTop���
+				elId: uni.$u.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 = uni.$u.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 uni.$u.deepMerge(uni.$u.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 : uni.$u.zIndex.sticky
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		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({
+					// ���������������������
+					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 = uni.$u.getPx(this.offsetTop) + uni.$u.getPx(this.customNavHeight)
+			},
+			async checkSupportCssSticky() {
+				// #ifdef H5
+				// H5������������������������������������������css sticky���������������������������������������������������
+				if (this.checkCssStickyForH5()) {
+					this.cssSticky = true
+				}
+				// #endif
+
+				// ������������������������8.0������������������������css sticky���(������������7���������������������������������sticky)
+				if (uni.$u.os() === 'android' && Number(uni.$u.sys().system) > 8) {
+					this.cssSticky = true
+				}
+
+				// APP-Vue������������������������computedStyle������������������css sticky
+				// #ifdef APP-VUE || MP-WEIXIN
+				this.cssSticky = await this.checkComputedStyle()
+				// #endif
+
+				// ios���������ios6���������������������css sticky���
+				if (uni.$u.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
+				return new Promise(resolve => {
+					uni.createSelectorQuery().in(this).select('.u-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
+			}
+		},
+		beforeDestroy() {
+			this.disconnectObserver('contentObserver')
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-sticky {
+		/* #ifdef APP-VUE || MP-WEIXIN */
+		// ���������������sticky������������������������������APP������uni.createSelectorQuery������������������css sticky������
+		position: sticky;
+		/* #endif */
+	}
+</style>

--
Gitblit v1.8.0