feat(sticky): styleConfig

Author: QiuShuiBai

packages/mpx-cube-ui/lib/components/sticky/index.mpx

@@ -1,7 +1,7 @@
 <template>
-  <view wx:ref class="cube-sticky" wx:style="{{containerStyle}}">
+  <view wx:ref class="cube-sticky" wx:style="{{styleConfig.sticky}}">
     <slot></slot>
-    <view class="cube-sticky-fixed" wx:style="{{fixedEleStyle}}" wx:ref="fixedEle">
+    <view class="cube-sticky-fixed" wx:style="{{[fixedEleStyle, styleConfig.fixedEle]}}" wx:ref="fixedEle">
     </view>
   </view>
 </template>

packages/mpx-cube-ui/lib/components/sticky/sticky-ele/sticky-ele.js

@@ -37,8 +37,7 @@ createComponent({
             // 重置高度为 auto，然后重新计算并设置固定高度
             this.eleHeight = 'auto';
             const query = this.createSelectorQuery();
-            // eslint-disable-next-line
-            // @ts-ignore
+            // eslint-disable-next-line @typescript-eslint/no-this-alias
             const that = this;
             query.select('.cube-sticky-ele').boundingClientRect((rect) => {
                 if (rect && rect.height > 0) {

packages/mpx-cube-ui/lib/components/sticky/sticky.js

@@ -20,6 +20,10 @@ createComponent({
         offset: {
             type: Number,
             value: 0
+        },
+        styleConfig: {
+            type: Object,
+            value: {}
         }
     },
     data: {
@@ -33,9 +37,6 @@ createComponent({
         eles: []
     },
     computed: {
-        containerStyle() {
-            return {};
-        },
         fixedEleStyle() {
             return {
                 top: `${this.offset}px`

packages/mpx-cube-ui/src/components/sticky/index.mpx

@@ -1,7 +1,7 @@
 <template>
-  <view wx:ref class="cube-sticky" wx:style="{{containerStyle}}">
+  <view wx:ref class="cube-sticky" wx:style="{{styleConfig.sticky}}">
     <slot></slot>
-    <view class="cube-sticky-fixed" wx:style="{{fixedEleStyle}}" wx:ref="fixedEle">
+    <view class="cube-sticky-fixed" wx:style="{{[fixedEleStyle, styleConfig.fixedEle]}}" wx:ref="fixedEle">
     </view>
   </view>
 </template>

packages/mpx-cube-ui/src/components/sticky/sticky-ele/sticky-ele.ts

@@ -38,8 +38,7 @@ createComponent({
       // 重置高度为 auto，然后重新计算并设置固定高度
       this.eleHeight = 'auto'
       const query = this.createSelectorQuery()
-      // eslint-disable-next-line
-      // @ts-ignore
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
       const that = this
       query.select('.cube-sticky-ele').boundingClientRect((rect: any) => {
         if (rect && rect.height > 0) {

packages/mpx-cube-ui/src/components/sticky/sticky.ts

@@ -31,6 +31,10 @@ createComponent({
     offset: {
       type: Number,
       value: 0
+    },
+    styleConfig: {
+      type: Object,
+      value: {}
     }
   },
   data: {
@@ -44,9 +48,6 @@ createComponent({
     eles: [] as StickyEleInstance[]
   },
   computed: {
-    containerStyle() {
-      return {}
-    },
     fixedEleStyle() {
       return {
         top: `${this.offset}px`