fix(skeleton): unable to achieve multi-column effects (#3932)

* fix(skeleton): unable to achieve multi-column effects

* style(Skeleton): add column spacing

---------

Co-authored-by: anlyyao <[email protected]>

Author: betavs

packages/components/skeleton/__test__/__snapshots__/index.test.js.snap

@@ -65,6 +65,10 @@ exports[`skeleton Props :text rowCol 1`] = `
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
             style=""
           />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
         </wx-view>
         <wx-view
           class="t-skeleton__row t-class-row"
@@ -73,6 +77,14 @@ exports[`skeleton Props :text rowCol 1`] = `
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
             style=""
           />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
         </wx-view>
         <wx-view
           class="t-skeleton__row t-class-row"
@@ -127,6 +139,10 @@ exports[`skeleton Props :text rowCol2 1`] = `
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
             style=""
           />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
         </wx-view>
         <wx-view
           class="t-skeleton__row t-class-row"
@@ -135,6 +151,14 @@ exports[`skeleton Props :text rowCol2 1`] = `
             class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
             style=""
           />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
+          <wx-view
+            class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none t-class-col"
+            style=""
+          />
         </wx-view>
         <wx-view
           class="t-skeleton__row t-class-row"

packages/components/skeleton/skeleton.less

@@ -31,6 +31,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
+    margin-right: @spacer-2;
 
     &:first-child:last-child,
     &:last-child {

packages/components/skeleton/skeleton.ts

@@ -33,7 +33,7 @@ export default class Skeleton extends SuperComponent {
   data = {
     prefix,
     classPrefix: name,
-    parsedRowcols: [],
+    parsedRowCols: [],
   };
 
   observers = {
@@ -60,20 +60,19 @@ export default class Skeleton extends SuperComponent {
     init() {
       const { theme, rowCol } = this.properties;
       const rowCols = [];
+
       if (rowCol.length) {
         rowCols.push(...rowCol);
       } else {
         rowCols.push(...ThemeMap[theme || 'text']);
       }
 
-      const parsedRowcols = rowCols.map((item) => {
+      const parsedRowCols = rowCols.map((item) => {
         if (isNumber(item)) {
-          return [
-            {
-              class: this.getColItemClass({ type: 'text' }),
-              style: {},
-            },
-          ];
+          return new Array(item).fill({
+            class: this.getColItemClass({ type: 'text' }),
+            style: {},
+          });
         }
         if (Array.isArray(item)) {
           return item.map((col) => {
@@ -96,9 +95,10 @@ export default class Skeleton extends SuperComponent {
       });
 
       this.setData({
-        parsedRowcols,
+        parsedRowCols,
       });
     },
+
     getColItemClass(obj: SkeletonRowColObj): ClassName {
       return classNames([
         `${name}__col`,

packages/components/skeleton/skeleton.wxml

@@ -1,9 +1,9 @@
 <wxs src="../common/utils.wxs" module="_" />
 
 <view wx:if="{{ isShow }}" style="{{_._style([style, customStyle])}}" class="{{classPrefix}} class {{prefix}}-class ">
-  <view wx:if="{{ parsedRowcols.length }}" class="{{classPrefix}}__content">
+  <view wx:if="{{ parsedRowCols.length }}" class="{{classPrefix}}__content">
     <view
-      wx:for="{{parsedRowcols}}"
+      wx:for="{{parsedRowCols}}"
       wx:for-index="index"
       wx:for-item="row"
       wx:key="index"