fix(sticky): 修复降级为fixed实现时效果异常 (#402)

xiaohe0601 · web-flow · commit 15f83380e467 · 2024-08-07T17:32:14.000+08:00
* fix(sticky): 修复降级为fixed实现时效果异常

* docs(sticky): 更新文档

* refactor(sticky): 更换系统版本判断
diff --git a/docs/components/layout/sticky.md b/docs/components/layout/sticky.md
@@ -2,58 +2,36 @@
 
 ### 介绍
 
-效果同 `css` 中的 `position: sticky`,对低端浏览器可使用其做兼容。
-
-> 只支持吸顶效果，也可以使用官方推荐 <https://developers.weixin.qq.com/miniprogram/dev/platform-capabilities/extended/component-plus/sticky.html>
+与 CSS 中 `position: sticky` 实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部
 
 ### 基础用法
 
 ```html
 <template>
-    <div class="demo">
-       <view class="container">
-        <nut-cell title="滚动页面,即可看到下方的按钮会吸顶" />
-       </view>
-       <nut-sticky>
-         <nut-button type="primary" style="margin-left: 50px">
-          吸顶按钮
-         </nut-button>
-       </nut-sticky>
-    </div>
+  <nut-sticky>
+    <nut-button type="primary">吸顶按钮</nut-button>
+  </nut-sticky>
 </template>
-<style lang="scss">
-    .demo {
-        height: 1500px !important;
-    }
-</style>
 ```
 
 ### 吸顶距离
 
 ```html
 <template>
-    <div class="demo">
-        <nut-sticky offset-top="120">
-            <nut-button type="primary">吸顶距离120px</nut-button>
-        </nut-sticky>
-    </div>
+  <nut-sticky offset-top="100">
+    <nut-button type="primary">吸顶距离 100px</nut-button>
+  </nut-sticky>
 </template>
-<style lang="scss">
-  .demo {
-      height: 1500px !important;
-  }
-</style>
 ```
 
 ## API
 
 ### Props
 
-| 参数            | 说明                                     | 类型    | 默认值    |
-| --------------- | ---------------------------------------- | ------- | --------- |
-| offset-top      | 吸顶距离                                 | number  | `0`       |
-| z-index         | 吸附时的层级                             | number  | `2000`    |
-| customNavHeight | 导航栏高度，自定义导航栏时，需要传入此值 | number  | `0`       |
-| disabled        | 是否禁用吸顶功能                         | boolean | `false`   |
-| bg-color        | 组件背景颜色                             | string  | `#ffffff` |
-| index           | 自定义标识，用于区分是哪一个组件         | number  |           |
+| 参数                | 说明                   | 类型      | 默认值           |
+|-------------------|----------------------|---------|---------------|
+| offset-top        | 吸顶距离                 | number  | `0`           |
+| z-index           | 吸附时的层级               | number  | `2000`        |
+| custom-nav-height | 导航栏高度，自定义导航栏时，需要传入此值 | number  | `0`           |
+| disabled          | 是否禁用吸顶功能             | boolean | `false`       |
+| bg-color          | 组件背景颜色               | string  | `transparent` |
diff --git a/example/src/pages/demo/layout/sticky/index.vue b/example/src/pages/demo/layout/sticky/index.vue
@@ -1,51 +1,33 @@
-<script lang="ts">
-import { defineComponent, ref } from 'vue'
-
-export default defineComponent({
-
-  setup() {
-    const container = ref(null)
-    return {
-      container,
-    }
-  },
-})
-</script>
-
 <template>
-  <div class=" sticky-demo">
+  <div class="sticky-demo">
     <h2 class="title">
       基础用法
     </h2>
-    <view class="container">
-      <nut-cell title="滚动页面,即可看到下方的按钮会吸顶" />
-    </view>
+
+    <nut-cell title="滚动页面，即可看到下方的按钮会吸顶" />
+
     <nut-sticky>
-      <nut-button type="primary" style="margin-left: 50px">
+      <nut-button style="margin-left: 50px" type="primary">
         吸顶按钮
       </nut-button>
     </nut-sticky>
+
     <h2 class="title">
       吸顶距离
     </h2>
-    <nut-sticky offset-top="200">
-      <nut-button type="primary" style="margin-left: 50px">
-        吸顶距离 120px
+
+    <nut-sticky offset-top="100">
+      <nut-button style="margin-left: 50px" type="primary">
+        吸顶距离 100px
       </nut-button>
     </nut-sticky>
+
     <view style="height: 1500px" />
+
     <nut-divider>已到底部</nut-divider>
   </div>
 </template>
 
-<route lang="json">
-{
-  "style": {
-    "navigationBarTitleText": "Sticky"
-  }
-}
-</route>
-
 <style lang="scss" scoped>
 .nut-theme-dark {
   .sticky-demo {
@@ -69,6 +51,13 @@ export default defineComponent({
     font-weight: normal;
     color: rgb(144 156 164 / 100%);
   }
-
 }
 </style>
+
+<route lang="json">
+{
+  "style": {
+    "navigationBarTitleText": "Sticky"
+  }
+}
+</route>
diff --git a/packages/nutui/components/sticky/index.scss b/packages/nutui/components/sticky/index.scss
@@ -1,7 +1,8 @@
 .nut-sticky {
-		/* #ifdef APP-PLUS || MP-WEIXIN || MP-TOUTIAO */
-		// 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
-		position: sticky;
+  /* #ifdef APP-VUE || MP-WEIXIN */
 
-		/* #endif */
-	}
+  // 此处默认写sticky属性，是为了给微信和APP通过uni.createSelectorQuery查询是否支持css sticky使用
+  position: sticky;
+
+  /* #endif */
+}
diff --git a/packages/nutui/components/sticky/sticky.ts b/packages/nutui/components/sticky/sticky.ts
@@ -3,14 +3,17 @@ import { commonProps, isH5, makeNumericProp, makeStringProp } from '../_utils'
 
 export const stickyProps = {
   ...commonProps,
-  /**
-   * @description 吸附时的层级
-   */
-  zIndex: [Number, String],
   /**
    * @description 吸顶距离
    */
   offsetTop: makeNumericProp(0),
+  /**
+   * @description 吸附时的层级
+   */
+  zIndex: {
+    type: [Number, String],
+    default: 2000,
+  },
   /**
    * @description 导航栏高度，自定义导航栏时，需要传入此值
    * - H5端的导航栏属于“自定义”导航栏的范畴，因为它是非原生的，与普通元素一致
@@ -24,10 +27,6 @@ export const stickyProps = {
    * @description 吸顶区域的背景颜色
    */
   bgColor: makeStringProp('transparent'),
-  /**
-   * @description 自定义标识，用于区分是哪一个组件
-   */
-  index: [String, Number],
 }
 
 export type StickyProps = ExtractPropTypes<typeof stickyProps>
diff --git a/packages/nutui/components/sticky/sticky.vue b/packages/nutui/components/sticky/sticky.vue
