feat: ✨ sticky组件支持支付宝平台

Author: xuqingkai

src/pages/sticky/Index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: weisheng
  * @Date: 2023-06-13 11:47:12
- * @LastEditTime: 2023-08-14 21:51:11
+ * @LastEditTime: 2024-02-26 14:42:16
  * @LastEditors: weisheng
  * @Description: 
  * @FilePath: \wot-design-uni\src\pages\sticky\Index.vue
@@ -22,7 +22,7 @@
       <view class="demo-block">
         <view class="demo-title">吸顶距离</view>
         <view class="demo-container">
-          <wd-sticky :offset-top="50" style="margin-left: 120px">
+          <wd-sticky :offset-top="50" custom-style="margin-left: 120px">
             <wd-button>吸顶距离</wd-button>
           </wd-sticky>
         </view>

src/uni_modules/wot-design-uni/components/wd-resize/wd-resize.vue

@@ -1,7 +1,7 @@
 <template>
   <view :class="`wd-resize ${customClass}`" :style="rootStyle">
     <!--插槽需要脱离父容器文档流，防止父容器固宽固高，进而导致插槽大小被被父容器限制-->
-    <view :class="`wd-resize__container ${customContainerClass}`">
+    <view :id="resizeId" :class="`wd-resize__container ${customContainerClass}`">
       <!--被监听的插槽-->
       <slot />
       <!--监听插槽变大-->
@@ -43,7 +43,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, getCurrentInstance, onMounted, ref } from 'vue'
-import { addUnit, objToStyle } from '../common/util'
+import { addUnit, objToStyle, uuid } from '../common/util'
 
 interface Props {
   customClass?: string
@@ -75,16 +75,12 @@ const rootStyle = computed(() => {
 let onScrollHandler = () => {}
 const { proxy } = getCurrentInstance() as any
 
+const resizeId = ref<string>(`resize${uuid()}`)
 const emit = defineEmits(['resize'])
 
 onMounted(() => {
-  const query = uni
-    .createSelectorQuery()
-    // #ifndef MP-ALIPAY
-    .in(proxy)
-    // #endif
-    .select('.wd-resize__container')
-    .boundingClientRect()
+  // 初始化数据获取
+  const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
   query.exec(([res]) => {
     // 闭包记录容器高度
     let lastHeight = res.height
@@ -94,13 +90,7 @@ onMounted(() => {
     width.value = lastWidth
     // 监听滚动事件
     onScrollHandler = () => {
-      const query = uni
-        .createSelectorQuery()
-        // #ifndef MP-ALIPAY
-        .in(proxy)
-        // #endif
-        .select('.wd-resize__container')
-        .boundingClientRect()
+      const query = uni.createSelectorQuery().in(proxy).select(`#${resizeId.value}`).boundingClientRect()
       query.exec(([res]) => {
         // 前两次滚动事件被触发，说明 created 的修改已渲染，通知用户代码当前容器大小
         if (scrollEventCount.value++ === 0) {

src/uni_modules/wot-design-uni/components/wd-sticky-box/wd-sticky-box.vue

@@ -1,6 +1,6 @@
 <template>
   <view style="position: relative">
-    <view :class="`wd-sticky-box ${props.customClass}`">
+    <view :class="`wd-sticky-box ${props.customClass}`" :id="styckyBoxId">
       <wd-resize @resize="resizeHandler">
         <slot />
       </wd-resize>
@@ -21,7 +21,7 @@ export default {
 
 <script lang="ts" setup>
 import { getCurrentInstance, onBeforeMount, provide, ref } from 'vue'
-import { getRect } from '../common/util'
+import { getRect, uuid } from '../common/util'
 
 interface Props {
   customClass?: string
@@ -31,6 +31,8 @@ const props = withDefaults(defineProps<Props>(), {
   customClass: ''
 })
 
+const styckyBoxId = ref<string>(`wd-sticky-box${uuid()}`)
+
 const observerMap = ref<Map<any, any>>(new Map())
 const height = ref<number>(0)
 const width = ref<number>(0)
@@ -109,10 +111,10 @@ function observerForChild(child) {
   if (height.value <= exposed.height.value) {
     exposed.setPosition(false, 'absolute', 0)
   }
-  observer.relativeToViewport({ top: -offset }).observe('.wd-sticky-box', (result) => {
+  observer.relativeToViewport({ top: -offset }).observe(`#${styckyBoxId.value}`, (result) => {
     scrollHandler(exposed, result)
   })
-  getRect('.wd-sticky-box', false, proxy).then((res: any) => {
+  getRect(`#${styckyBoxId.value}`, false, proxy).then((res: any) => {
     // 当 wd-sticky-box 位于 viewport 外部时不会触发 observe，此时根据位置手动修复位置。
     if (res.bottom <= offset) scrollHandler(exposed, { boundingClientRect: res })
   })

src/uni_modules/wot-design-uni/components/wd-sticky/wd-sticky.vue

@@ -2,7 +2,7 @@
   <view :style="`${rootStyle};display: inline-block;`">
     <!--强制设置高宽，防止元素坍塌-->
     <!--在使用 wd-sticky-box 时，某些情况下 wd-sticky__container 的 'position：absolute' 需要相对于 wd-sticky-box-->
-    <view :class="`wd-sticky ${props.customClass}`" :style="stickyStyle">
+    <view :class="`wd-sticky ${props.customClass}`" :style="stickyStyle" :id="styckyId">
       <!--吸顶容器-->
       <view class="wd-sticky__container" :style="containerStyle">
         <!--监听元素尺寸变化-->
@@ -28,7 +28,7 @@ export default {
 
 <script lang="ts" setup>
 import { type Ref, computed, getCurrentInstance, inject, ref } from 'vue'
-import { addUnit, getRect, objToStyle } from '../common/util'
+import { addUnit, getRect, objToStyle, uuid } from '../common/util'
 
 interface Props {
   customStyle?: string
@@ -44,6 +44,8 @@ const props = withDefaults(defineProps<Props>(), {
   offsetTop: 0
 })
 
+const styckyId = ref<string>(`wd-sticky${uuid()}`)
+
 const openBox = ref<boolean>(false)
 const position = ref<string>('absolute')
 const top = ref<number>(0)
@@ -142,8 +144,8 @@ function observerContentScroll() {
     .relativeToViewport({
       top: -offset // viewport上边界往下拉
     })
-    .observe('.wd-sticky', scrollHandler)
-  getRect('.wd-sticky', false, proxy).then((res: any) => {
+    .observe(`#${styckyId.value}`, scrollHandler)
+  getRect(`#${styckyId.value}`, false, proxy).then((res: any) => {
     // 当 wd-sticky 位于 viewport 外部时不会触发 observe，此时根据位置手动修复位置。
     if (res.bottom <= offset) scrollHandler({ boundingClientRect: res })
   })