fix: tabbar demo props 驼峰出错问题 (#36)

* fix: tabbar demo props 驼峰出错问题 * fix: 组件icon 大小*2 * fix: sticky空白页 * feat: demo-跳转自动回到页顶 Co-authored-by: langen <langen@dian.so>
AntmJS · Nov 2, 2021 · 5d92fea · 5d92fea
1 parent 83f917c
commit 5d92fea
Show file tree

Hide file tree

Showing 11 changed files with 79 additions and 55 deletions.
diff --git a/packages/react-demo/copyPages.sh b/packages/react-demo/copyPages.sh
@@ -4,7 +4,7 @@ path=$(cd $(dirname $0); pwd)
 if [  `echo $path | grep -e vantui$`  ];then 
   echo '在根目录'
   echo '删除'
-  rm -rf  ./src/pages/
+  rm -rf  ./packages/vantui-demo/src/pages/
   echo '平移'
   cp  -r ./packages/vantui-demo/src/pages ./packages/react-ui/src/pages
 else

diff --git a/packages/react-demo/src/components/demo-page/index.js b/packages/react-demo/src/components/demo-page/index.js
@@ -1,6 +1,7 @@
 import { Icon } from '@antmjs/vantui'
 import { View } from '@tarojs/components'
-import * as React from 'react'
+import { pageScrollTo } from '@tarojs/taro'
+import React, { useEffect } from 'react'
 import history from './../../history'
 import './index.less'
 
@@ -12,6 +13,16 @@ export default function Page(props) {
     history.go(-1)
   }
 
+  useEffect(() => {
+    if (process.env.LIBRARY_ENV === 'react') {
+      document.body.scrollTop = document.documentElement.scrollTop = 0
+    } else {
+      pageScrollTo({
+        scrollTop: 0,
+      })
+    }
+  })
+
   return (
     <View className="demo-page">
       {'h5' === process.env.TARO_ENV && (

diff --git a/packages/vantui-demo/src/components/demo-page/index.js b/packages/vantui-demo/src/components/demo-page/index.js
@@ -1,13 +1,23 @@
 import { Icon } from '@antmjs/vantui'
 import { View } from '@tarojs/components'
-import { navigateBack } from '@tarojs/taro'
-import * as React from 'react'
+import { navigateBack, pageScrollTo } from '@tarojs/taro'
+import React, { useEffect } from 'react'
 import './index.less'
 
 export default function Page(props) {
   // eslint-disable-next-line react/prop-types
   const { title, children } = props
 
+  useEffect(() => {
+    if (process.env.LIBRARY_ENV === 'react') {
+      document.body.scrollTop = document.documentElement.scrollTop = 0
+    } else {
+      pageScrollTo({
+        scrollTop: 0,
+      })
+    }
+  })
+
   return (
     <View className="demo-page">
       {'h5' === process.env.TARO_ENV && (

diff --git a/packages/vantui-demo/src/pages/grid/index.js b/packages/vantui-demo/src/pages/grid/index.js
@@ -24,7 +24,7 @@ export default class Index extends Component {
       <DemoPage title="Grid 宫格">
         <>
           <DemoBlock title="基本用法">
-            <Grid>
+            <Grid iconSize="48">
               {array4.map((item) => {
                 return (
                   <GridItem icon="photo-o" text="文字" key={item}></GridItem>
@@ -33,7 +33,7 @@ export default class Index extends Component {
             </Grid>
           </DemoBlock>
           <DemoBlock title="自定义列数">
-            <Grid columnNum="3">
+            <Grid columnNum="3" iconSize="48">
               {array6.map((item) => {
                 return (
                   <GridItem icon="photo-o" text="文字" key={item}></GridItem>
@@ -42,7 +42,7 @@ export default class Index extends Component {
             </Grid>
           </DemoBlock>
           <DemoBlock title="自定义内容">
-            <Grid columnNum="3" border={false}>
+            <Grid columnNum="3" border={false} iconSize="48">
               {array3.map((item, index) => {
                 return (
                   <GridItem key={index}>
@@ -60,7 +60,7 @@ export default class Index extends Component {
             </Grid>
           </DemoBlock>
           <DemoBlock title="正方形格子">
-            <Grid square>
+            <Grid square iconSize="48">
               {array8.map((item) => {
                 return (
                   <GridItem icon="photo-o" text="文字" key={item}></GridItem>
@@ -69,7 +69,7 @@ export default class Index extends Component {
             </Grid>
           </DemoBlock>
           <DemoBlock title="格子间距">
-            <Grid gutter={10}>
+            <Grid gutter={10} iconSize="48">
               {array8.map((item) => {
                 return (
                   <GridItem icon="photo-o" text="文字" key={item}></GridItem>
@@ -78,7 +78,7 @@ export default class Index extends Component {
             </Grid>
           </DemoBlock>
           <DemoBlock title="内容横排">
-            <Grid direction="horizontal" columnNum="3">
+            <Grid direction="horizontal" columnNum="3" iconSize="48">
               {array3.map((item) => {
                 return (
                   <GridItem icon="photo-o" text="文字" key={item}></GridItem>
@@ -87,7 +87,7 @@ export default class Index extends Component {
             </Grid>
           </DemoBlock>
           <DemoBlock title="页面跳转">
-            <Grid clickable columnNum="2">
+            <Grid clickable columnNum="2" iconSize="48">
               <GridItem
                 icon="home-o"
                 linkType="navigateTo"
@@ -103,7 +103,7 @@ export default class Index extends Component {
             </Grid>
           </DemoBlock>
           <DemoBlock title="徽标提示">
-            <Grid columnNum="2">
+            <Grid columnNum="2" iconSize="48">
               <GridItem icon="home-o" text="文字" dot></GridItem>
               <GridItem icon="search" text="文字" badge="99+"></GridItem>
             </Grid>

diff --git a/packages/vantui-demo/src/pages/radio/index.js b/packages/vantui-demo/src/pages/radio/index.js
@@ -180,10 +180,10 @@ export default class Index extends Component {
                 })
               }}
             >
-              <Radio name="1" iconSize="24px" className="demo-radio">
+              <Radio name="1" iconSize="48" className="demo-radio">
                 单选框
               </Radio>
-              <Radio name="2" iconSize="24px">
+              <Radio name="2" iconSize="48">
                 单选框
               </Radio>
             </RadioGroup>

diff --git a/packages/vantui-demo/src/pages/sticky/index.js b/packages/vantui-demo/src/pages/sticky/index.js
@@ -19,6 +19,10 @@ export default class Index extends Component {
     offsetTop: 0,
   }
 
+  componentDidMount() {
+    this.onReady()
+  }
+
   onReady = () => {
     this.setState({
       container: () => createSelectorQuery().select('#container'),
@@ -42,45 +46,44 @@ export default class Index extends Component {
     const { container, scrollTop, offsetTop } = this.state
     return (
       <DemoPage title="Sticky 粘性布局">
-        <View className="sticky-page">
-          <DemoBlock title="基础用法">
-            <Sticky>
-              <Button type="primary" style="margin-left: 15px">
-                基础用法
-              </Button>
-            </Sticky>
-          </DemoBlock>
-          <DemoBlock title="吸顶距离">
-            <Sticky offsetTop={50}>
-              <Button type="info" style="margin-left: 115px">
-                吸顶距离
+        <DemoBlock title="基础用法">
+          <Sticky>
+            <Button type="primary" style="margin-left: 15px">
+              基础用法
+            </Button>
+          </Sticky>
+        </DemoBlock>
+        <DemoBlock title="吸顶距离">
+          <Sticky offsetTop={50}>
+            <Button type="info" style="margin-left: 115px">
+              吸顶距离
+            </Button>
+          </Sticky>
+        </DemoBlock>
+        <DemoBlock title="指定容器">
+          <View id="container" style="height: 150px; background-color: #fff;">
+            <Sticky container={container}>
+              <Button type="warning" style="margin-left: 215px;">
+                指定容器
               </Button>
             </Sticky>
-          </DemoBlock>
-          <DemoBlock title="指定容器">
-            <View id="container" style="height: 150px; background-color: #fff;">
-              <Sticky container={container}>
-                <Button type="warning" style="margin-left: 215px;">
-                  指定容器
-                </Button>
+          </View>
+        </DemoBlock>
+        <DemoBlock title="嵌套在 scroll-view 内使用">
+          <ScrollView
+            onScroll={this.onScroll}
+            scrollY
+            id="scroller"
+            style="height: 200px; background-color: #fff;"
+          >
+            <View style="height: 400px;">
+              <Sticky scrollTop={scrollTop} offsetTop={offsetTop}>
+                <Button type="warning">嵌套在 scroll-view 内</Button>
               </Sticky>
             </View>
-          </DemoBlock>
-          <DemoBlock title="嵌套在 scroll-view 内使用">
-            <ScrollView
-              onScroll={this.onScroll}
-              scrollY
-              id="scroller"
-              style="height: 200px; background-color: #fff;"
-            >
-              <View style="height: 400px;">
-                <Sticky scrollTop={scrollTop} offsetTop={offsetTop}>
-                  <Button type="warning">嵌套在 scroll-view 内</Button>
-                </Sticky>
-              </View>
-            </ScrollView>
-          </DemoBlock>
-        </View>
+          </ScrollView>
+        </DemoBlock>
+        <View className="sticky-page"></View>
       </DemoPage>
     )
   }

diff --git a/packages/vantui-demo/src/pages/sticky/index.scss b/packages/vantui-demo/src/pages/sticky/index.scss
@@ -1,5 +1,5 @@
 .sticky-page {
-  height: 200vh;
+  height: 800px;
 }
 
 .sticky-container {

diff --git a/packages/vantui-demo/src/pages/tabbar/index.js b/packages/vantui-demo/src/pages/tabbar/index.js
@@ -153,7 +153,7 @@ export default class Index extends Component {
                     ></Image>
                   </>
                 }
-                renderIconactive={
+                renderIconActive={
                   <>
                     <Image
                       src={icon.active}

diff --git a/packages/vantui/src/components/grid/index.tsx b/packages/vantui/src/components/grid/index.tsx
@@ -12,7 +12,7 @@ export default function Index(props: GridProps) {
     center = true,
     border = true,
     direction,
-    iconSize,
+    iconSize = '28',
     square,
     reverse = false,
     className = '',

diff --git a/packages/vantui/src/components/tabs/index.tsx b/packages/vantui/src/components/tabs/index.tsx
@@ -321,12 +321,12 @@ export default function Index(props: TabsProps) {
   }
 
   const onTouchMove = function (event: any) {
-    if (!swipeable || ref.current.swiping) return
+    if (!swipeable || !ref.current.swiping) return
     touchMove(event)
   }
 
   const onTouchEnd = function () {
-    if (!swipeable) return
+    if (!swipeable || !ref.current.swiping) return
     const { direction, deltaX, offsetX } = ref.current
     const minSwipeDistance = 50
     if (direction === 'horizontal' && offsetX >= minSwipeDistance) {

diff --git a/packages/vantui/types/grid.d.ts b/packages/vantui/types/grid.d.ts
@@ -9,7 +9,7 @@ export interface GridProps extends StandardProps {
   center?: boolean
   border?: boolean
   direction?: string
-  iconSize?: string
+  iconSize?: string | number
   reverse?: boolean
   children?: React.ReactNode
 }