feat(Skeleton): support delay props (#2698)

Tencent · Apr 16, 2024 · 1e8a6ac · 1e8a6ac
1 parent 92ec2e3
commit 1e8a6ac
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/src/skeleton/__test__/index.test.js b/src/skeleton/__test__/index.test.js
@@ -26,7 +26,7 @@ describe('skeleton', () => {
   describe('Props', () => {
     it(`: style && customStyle`, async () => {
       const id = simulate.load({
-        template: `<t-skeleton class="skeleton" style="{{style}}" customStyle="{{customStyle}}"></t-skeleton>`,
+        template: `<t-skeleton class="skeleton" style="{{style}}" customStyle="{{customStyle}}" loading="{{true}}"></t-skeleton>`,
         usingComponents: {
           't-skeleton': skeleton,
         },

diff --git a/src/skeleton/skeleton.ts b/src/skeleton/skeleton.ts
@@ -37,6 +37,19 @@ export default class Skeleton extends SuperComponent {
     rowCol() {
       this.init();
     },
+    'loading,delay'(loading: boolean, delay: number) {
+      if (!loading || delay === 0) {
+        this.setData({
+          isShow: loading,
+        });
+        return;
+      }
+      setTimeout(() => {
+        this.setData({
+          isShow: loading,
+        });
+      }, delay);
+    },
   };
 
   lifetimes = {

diff --git a/src/skeleton/skeleton.wxml b/src/skeleton/skeleton.wxml
@@ -1,6 +1,6 @@
 <wxs src="../common/utils.wxs" module="_" />
 
-<view wx:if="{{ loading }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class ">
+<view wx:if="{{ isShow }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class ">
   <view wx:if="{{ parsedRowcols.length }}" class="{{classPrefix}}__content">
     <view
       wx:for="{{parsedRowcols}}"