From f26f29d84e0a68831a6af14dab3eec5500496d2e Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期三, 28 五月 2025 16:48:52 +0800
Subject: [PATCH] 初始化项目
---
uview-ui/components/u-sticky/u-sticky.vue | 157 ++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 157 insertions(+), 0 deletions(-)
diff --git a/uview-ui/components/u-sticky/u-sticky.vue b/uview-ui/components/u-sticky/u-sticky.vue
new file mode 100644
index 0000000..d9bc34c
--- /dev/null
+++ b/uview-ui/components/u-sticky/u-sticky.vue
@@ -0,0 +1,157 @@
+<template>
+ <view class="">
+ <view class="u-sticky-wrap" :class="[elClass]" :style="{
+ height: fixed ? height + 'px' : 'auto',
+ backgroundColor: bgColor
+ }">
+ <view class="u-sticky" :style="{
+ position: fixed ? 'fixed' : 'static',
+ top: stickyTop + 'px',
+ left: left + 'px',
+ width: width == 'auto' ? 'auto' : width + 'px',
+ zIndex: uZIndex
+ }">
+ <slot></slot>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ /**
+ * sticky 鍚搁《
+ * @description 璇ョ粍浠朵笌CSS涓璸osition: sticky灞炴�у疄鐜扮殑鏁堟灉涓�鑷达紝褰撶粍浠惰揪鍒伴璁剧殑鍒伴《閮ㄨ窛绂绘椂锛� 灏变細鍥哄畾鍦ㄦ寚瀹氫綅缃紝缁勪欢浣嶇疆澶т簬棰勮鐨勯《閮ㄨ窛绂绘椂锛屼細閲嶆柊鎸夌収姝ｅ父鐨勫竷灞�鎺掑垪銆�
+ * @tutorial https://www.uviewui.com/components/sticky.html
+ * @property {String Number} offset-top 鍚搁《鏃朵笌椤堕儴鐨勮窛绂伙紝鍗曚綅rpx锛堥粯璁�0锛�
+ * @property {String Number} index 鑷畾涔夋爣璇嗭紝鐢ㄤ簬鍖哄垎鏄摢涓�涓粍浠�
+ * @property {Boolean} enable 鏄惁寮�鍚惛椤跺姛鑳斤紙榛樿true锛�
+ * @property {String} bg-color 缁勪欢鑳屾櫙棰滆壊锛堥粯璁�#ffffff锛�
+ * @property {String Number} z-index 鍚搁《鏃剁殑z-index鍊硷紙榛樿970锛�
+ * @property {String Number} h5-nav-height 瀵艰埅鏍忛珮搴︼紝鑷畾涔夊鑸爮鏃�(鏃犲鑸爮鏃堕渶璁剧疆涓�0)锛岄渶瑕佷紶鍏ユ鍊硷紝鍗曚綅px锛堥粯璁�44锛�
+ * @event {Function} fixed 缁勪欢鍚搁《鏃惰Е鍙�
+ * @event {Function} unfixed 缁勪欢鍙栨秷鍚搁《鏃惰Е鍙�
+ * @example <u-sticky offset-top="200"><view>濉炰笅绉嬫潵椋庢櫙寮傦紝琛￠槼闆佸幓鏃犵暀鎰�</view></u-sticky>
+ */
+ export default {
+ name: "u-sticky",
+ props: {
+ // 鍚搁《瀹瑰櫒鍒伴《閮ㄦ煇涓窛绂荤殑鏃跺�欙紝杩涜鍚搁《锛屽湪H5骞冲彴锛孨avigationBar涓�44px
+ offsetTop: {
+ type: [Number, String],
+ default: 0
+ },
+ //鍒楄〃涓殑绱㈠紩鍊�
+ index: {
+ type: [Number, String],
+ default: ''
+ },
+ // 鏄惁寮�鍚惛椤跺姛鑳�
+ enable: {
+ type: Boolean,
+ default: true
+ },
+ // h5椤堕儴瀵艰埅鏍忕殑楂樺害
+ h5NavHeight: {
+ type: [Number, String],
+ default: 44
+ },
+ // 鍚搁《鍖哄煙鐨勮儗鏅鑹�
+ bgColor: {
+ type: String,
+ default: '#ffffff'
+ },
+ // z-index鍊�
+ zIndex: {
+ type: [Number, String],
+ default: ''
+ }
+ },
+ data() {
+ return {
+ fixed: false,
+ height: 'auto',
+ stickyTop: 0,
+ elClass: this.$u.guid(),
+ left: 0,
+ width: 'auto',
+ };
+ },
+ watch: {
+ offsetTop(val) {
+ this.initObserver();
+ },
+ enable(val) {
+ if (val == false) {
+ this.fixed = false;
+ this.disconnectObserver('contentObserver');
+ } else {
+ this.initObserver();
+ }
+ }
+ },
+ computed: {
+ uZIndex() {
+ return this.zIndex ? this.zIndex : this.$u.zIndex.sticky;
+ }
+ },
+ mounted() {
+ this.initObserver();
+ },
+ methods: {
+ initObserver() {
+ if (!this.enable) return;
+ // #ifdef H5
+ this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) + this.h5NavHeight : this.h5NavHeight;
+ // #endif
+ // #ifndef H5
+ this.stickyTop = this.offsetTop != 0 ? uni.upx2px(this.offsetTop) : 0;
+ // #endif
+
+ this.disconnectObserver('contentObserver');
+ this.$uGetRect('.' + this.elClass).then((res) => {
+ this.height = res.height;
+ this.left = res.left;
+ this.width = res.width;
+ this.$nextTick(() => {
+ this.observeContent();
+ });
+ });
+ },
+ observeContent() {
+ this.disconnectObserver('contentObserver');
+ const contentObserver = this.createIntersectionObserver({
+ thresholds: [0.95, 0.98, 1]
+ });
+ contentObserver.relativeToViewport({
+ top: -this.stickyTop
+ });
+ contentObserver.observe('.' + this.elClass, res => {
+ if (!this.enable) return;
+ this.setFixed(res.boundingClientRect.top);
+ });
+ this.contentObserver = contentObserver;
+ },
+ setFixed(top) {
+ const fixed = top < this.stickyTop;
+ if (fixed) this.$emit('fixed', this.index);
+ else if(this.fixed) this.$emit('unfixed', this.index);
+ this.fixed = fixed;
+ },
+ disconnectObserver(observerName) {
+ const observer = this[observerName];
+ observer && observer.disconnect();
+ },
+ },
+ beforeDestroy() {
+ this.disconnectObserver('contentObserver');
+ }
+ };
+</script>
+
+<style scoped lang="scss">
+ @import "../../libs/css/style.components.scss";
+
+ .u-sticky {
+ z-index: 9999999999;
+ }
+</style>
--
Gitblit v1.9.3