From f4991944d13b94355fb8aaf03dad7d60ca530ee9 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 30 Nov 2023 16:36:45 +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