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