chore: change some style (#2773)

* chore: change some style

* chore: change some code

* fix(Tabs): 调整初始化时机

example/pages/button/index.wxml

@@ -1,4 +1,4 @@
-<demo-section>
+
   <demo-block title="按钮类型" padding>
     <view class="row">
       <van-button class="demo-margin-right">默认按钮</van-button>
@@ -58,4 +58,4 @@
     <van-button type="primary" custom-class="demo-margin-bottom">普通按钮</van-button>
     <van-button type="primary" block>块级元素</van-button>
   </demo-block>
-</demo-section>
+

example/pages/image/index.wxml

@@ -1,4 +1,4 @@
-<demo-section>
+
   <demo-block title="基础用法" padding>
     <van-row>
       <van-image
@@ -100,4 +100,4 @@
       </van-col>
     </van-row>
   </demo-block>
-</demo-section>
+

example/pages/progress/index.wxml

@@ -1,20 +1,20 @@
 <demo-block title="基础用法">
-  <van-progress custom-class="progress" percentage="50" />
+  <van-progress custom-class="progress-position" percentage="50" />
 </demo-block>
 
 <demo-block title="线条粗细">
-  <van-progress custom-class="progress" stroke-width="8" percentage="50" />
+  <van-progress custom-class="progress-position" stroke-width="8" percentage="50" />
 </demo-block>
 
 <demo-block title="置灰">
-  <van-progress custom-class="progress" inactive percentage="50" />
+  <van-progress custom-class="progress-position" inactive percentage="50" />
 </demo-block>
 
 <demo-block title="样式定制">
-  <van-progress custom-class="progress" pivot-text="橙色" color="#f2826a" percentage="25" />
+  <van-progress custom-class="progress-position" pivot-text="橙色" color="#f2826a" percentage="25" />
-  <van-progress custom-class="progress" pivot-text="红色" color="#ee0a24" percentage="50" />
+  <van-progress custom-class="progress-position" pivot-text="红色" color="#ee0a24" percentage="50" />
   <van-progress
-    custom-class="progress"
+    custom-class="progress-position"
     percentage="75"
     pivot-text="紫色"
     pivot-color="#7232dd"

example/pages/progress/index.wxss

@@ -1,3 +1,3 @@
-.progress {
+.progress-position {
   margin: 5px 15px 20px;
 }

example/pages/rate/index.wxml

@@ -1,6 +1,6 @@
 <demo-block title="基础用法">
   <van-rate
-    custom-class="van-rate"
+    custom-class="rate-position"
     data-key="value1"
     value="{{ value1 }}"
   />
@@ -8,7 +8,7 @@
 
 <demo-block title="自定义图标">
   <van-rate
-    custom-class="van-rate"
+    custom-class="rate-position"
     icon="like"
     void-icon="like-o"
     data-key="value2"
@@ -18,7 +18,7 @@
 
 <demo-block title="自定义样式">
   <van-rate
-    custom-class="van-rate"
+    custom-class="rate-position"
     data-key="value3"
     value="{{ value3 }}"
     size="{{ 25 }}"
@@ -31,7 +31,7 @@
 
 <demo-block title="半星">
   <van-rate
-    custom-class="van-rate"
+    custom-class="rate-position"
     data-key="value4"
     value="{{ value4 }}"
     size="{{ 25 }}"
@@ -46,7 +46,7 @@
 
 <demo-block title="自定义数量">
   <van-rate
-    custom-class="van-rate"
+    custom-class="rate-position"
     data-key="value5"
     value="{{ value5 }}"
     count="{{ 6 }}"
@@ -56,7 +56,7 @@
 
 <demo-block title="禁用状态">
   <van-rate
-    custom-class="van-rate"
+    custom-class="rate-position"
     data-key="value6"
     value="{{ value6 }}"
     disabled
@@ -65,7 +65,7 @@
 
 <demo-block title="只读状态">
   <van-rate
-    custom-class="van-rate"
+    custom-class="rate-position"
     data-key="value6"
     value="{{ value6 }}"
     readonly

example/pages/rate/index.wxss

@@ -2,6 +2,6 @@ page {
   background-color: #fff;
 }
 
-.van-rate {
+.rate-position {
   margin-left: 15px;
 }

example/pages/tab/index.wxml

@@ -57,7 +57,7 @@
 </demo-block>
 
 <demo-block title="样式风格">
-  <van-tabs type="card" tab-class="tab-class">
+  <van-tabs type="card" tab-class="special-tab">
     <van-tab
       wx:for="{{ tabs3 }}"
       wx:key="index"
@@ -127,7 +127,7 @@
 </demo-block>
 
 <demo-block title="自定义标题">
-  <van-tabs active="{{ 1 }}" bind:change="onChange" tab-class="tab-class" tab-active-class="tab-active-class">
+  <van-tabs active="{{ 1 }}" bind:change="onChange" tab-class="special-tab" tab-active-class="special-tab-active">
     <van-icon
       slot="nav-right"
       name="search"

example/pages/tab/index.wxss

@@ -17,10 +17,10 @@ page {
   background-color: #fff;
 }
 
-.tab-class {
+.special-tab {
   transition: all 0.25s ease-in-out;
 }
 
-.tab-active-class {
+.special-tab-active {
   font-size: 1.05em !important;
 }

packages/grid/index.ts

@@ -43,10 +43,6 @@ VantComponent({
     viewStyle: '',
   },
 
-  beforeCreate() {
-    this.children = [];
-  },
-
   created() {
     const { gutter } = this.data;
     if (gutter) {

packages/rate/index.ts

@@ -41,7 +41,10 @@ VantComponent({
     },
     count: {
       type: Number,
-      value: 5
+      value: 5,
+      observer(value: number) {
+        this.setData({ innerCountArray: Array.from({ length: value }) });
+      },
     },
     gutter: null,
     touchable: {
@@ -51,7 +54,8 @@ VantComponent({
   },
 
   data: {
-    innerValue: 0
+    innerValue: 0,
+    innerCountArray: Array.from({ length: 5 }),
   },
 
   methods: {

packages/rate/index.wxml

@@ -6,7 +6,7 @@
 >
   <view
     class="van-rate__item"
-    wx:for="{{ count }}"
+    wx:for="{{ innerCountArray }}"
     wx:key="index"
     style="padding-right: {{ index !== count - 1 ? utils.addUnit(gutter) : '' }}"
   >

packages/skeleton/index.ts

@@ -5,7 +5,10 @@ VantComponent({
   props: {
     row: {
       type: Number,
-      value: 0
+      value: 0,
+      observer(value: number) {
+        this.setData({ rowArray: Array.from({ length: value }) });
+      },
     },
     title: Boolean,
     avatar: Boolean,
@@ -39,6 +42,7 @@ VantComponent({
   },
 
   data: {
-    isArray: false
+    isArray: false,
+    rowArray: [],
   }
 });

packages/skeleton/index.wxml

@@ -16,7 +16,7 @@
       style="{{ 'width:' + titleWidth }}"
     />
     <view
-      wx:for="{{ row }}"
+      wx:for="{{ rowArray }}"
       wx:key="index"
       wx:for-index="index"
       class="row-class {{ utils.bem('skeleton__row') }}"

packages/tabs/index.ts

@@ -116,9 +116,10 @@ VantComponent({
   mounted() {
     this.setData({
       container: () => this.createSelectorQuery().select('.van-tabs')
+    }, () => {
+      this.setLine(true);
+      this.scrollIntoView();
     });
-    this.setLine(true);
-    this.scrollIntoView();
   },
 
   methods: {