doc: update Cascader&Cascaderview&Infinitescroll docs

src/components/cascader-view/demos/demo1.tsx

@@ -1,30 +1,11 @@
 import React, { useState } from 'react'
-import { CascaderView, Button } from 'antd-mobile'
+import { CascaderView } from 'antd-mobile'
 import { DemoBlock } from 'demos'
 
 import { options, sameValueOptions } from '../../cascader/demos/data'
 
-const list1 = [
-  {
-    label: '西湖区',
-    value: '西湖区',
-  },
-  {
-    label: '上城区',
-    value: '上城区',
-  },
-  {
-    label: '余杭区',
-    value: '余杭区',
-    disabled: true,
-  },
-]
-
 export default () => {
   const [value, setValue] = useState<string[]>([])
-  const [list, setList] = useState<any[]>([])
-
-  console.log(list, 'list')
 
   return (
     <>
@@ -55,9 +36,8 @@ export default () => {
           }}
         />
       </DemoBlock>
-      <DemoBlock title='开启loding并且options为空时会开启骨架屏' padding='0'>
-        <CascaderView options={list} loading />
-        <Button onClick={() => setList(list1)}>push数据</Button>
+      <DemoBlock title='开启骨架屏' padding='0'>
+        <CascaderView options={options} loading />
       </DemoBlock>
     </>
   )

src/components/cascader/cascader.tsx

@@ -40,6 +40,7 @@ export type CascaderProps = {
   title?: ReactNode
   confirmText?: ReactNode
   cancelText?: ReactNode
+  loading?: boolean
   children?: (
     items: (CascaderOption | null)[],
     actions: CascaderActions

src/components/cascader/index.en.md

@@ -51,6 +51,7 @@ type CascaderValueExtend = {
 | title | Title | `ReactNode` | - |
 | value | Selected options | `CascaderValue[]` | - |
 | visible | Whether to show or hide the Picker | `boolean` | `false` |
+| loading | Open the skeleton screen | `boolean` | `false` |
 
 Please pay attention to the `children` property of `CascaderOption`. If the `children` of an `option` is `[]`, then when the user selects this `option`, the Cascader component will automatically jump to the next level, even if There are currently no options at this level (because Cascader has no way to determine whether this empty array will become an array with content in subsequent updates). Therefore, please make sure that the `children` property of the last level option (aka "leaf node") does not exist or has the value `undefined`, so that the Cascader component can correctly recognize it.
 

src/components/cascader/index.zh.md

@@ -51,6 +51,7 @@ type CascaderValueExtend = {
 | title | 标题 | `ReactNode` | - |
 | value | 选中项 | `CascaderValue[]` | - |
 | visible | 是否显示级联选择 | `boolean` | `false` |
+| loading | 开启骨架屏 | `boolean` | `false` |
 
 请留意 `CascaderOption` 的 `children` 属性，如果某个 `option` 的 `children` 为 `[]`，那当用户选择了这个 `option` 时，Cascader 组件会自动跳转到下一级，即便这一级当前是没有任何选项的（因为 Cascader 没有办法判断，在后续的更新中，这个空数组会不会变为一个有内容的数组）。因此，请确保最末一级的 option（也就是"叶子节点"）的 `children` 属性不存在或者值为 `undefined`，这样 Cascader 组件才能将其正确地识别。
 

src/components/infinite-scroll/index.en.md

@@ -45,7 +45,7 @@ function loadMore() { // ok
 
 ### Customized Content
 
-If necessary, `<InfiniteScroll>` allows custom display content, this content can contain any element, including svg and elements with css animation.
+If necessary, `InfiniteScroll` allows custom display content, this content can contain any element, including svg and elements with css animation.
 
 <code src="./demos/content.tsx"></code>
 
@@ -93,7 +93,9 @@ But in some scenarios (for example, when used with the `Tabs` component), you ma
 </Tabs>
 ```
 
-Problem description: The `Tabs` component displays the content of the first `Tab` item by default, so the content of the second `Tab` item `InfiniteScroll` is not visible. But the second `Tab` has a `forceRender` property added, so its content is rendered even if it is not visible. When the `InfiniteScroll` component is rendered this time, since the component is not visible, the `loadMore` function will not be called, which is normal and as expected. _However, when we switch to the second `Tab` to display the `InfiniteScroll` component, we find that the `InfiniteScroll` component does not call the `loadMore` function, which is different from what we expected. We hope that the `loadMore` function will be called at this time_.
+Problem description: The `Tabs` component displays the content of the first `Tab` item by default, so the content of the second `Tab` item `InfiniteScroll` is not visible. But the second `Tab` has a `forceRender` property added, so its content is rendered even if it is not visible. When the `InfiniteScroll` component is rendered this time, since the component is not visible, the `loadMore` function will not be called, which is normal and as expected.
+
+_However, when we switch to the second `Tab` to display the `InfiniteScroll` component, we find that the `InfiniteScroll` component does not call the `loadMore` function, which is different from what we expected. We hope that the `loadMore` function will be called at this time_.
 
 Reason: When you click to switch the `Tab` item of the `Tabs` component, the highlight state of the `Tabs` component will be modified. At this time, the `Tabs` component will be re-rendered. However, it should be noted that **only the content of the `Tabs` component itself will be re-rendered, and the `InfiniteScroll` component is outside the `Tabs` component, not the `Tabs` component's own content**. So, when switching `Tab`, the `InfiniteScroll` component does not re-render, and it does not trigger its checking mechanism again.
 

src/components/infinite-scroll/index.zh.md

@@ -45,7 +45,7 @@ function loadMore() { // 正确
 
 ### 自定义 Content
 
-如果需要的话，`<InfiniteScroll>` 允许自定义展示内容，这个内容可以包含任何元素，包括 svg 和带有 css 动画的元素。
+如果需要的话，`InfiniteScroll` 允许自定义展示内容，这个内容可以包含任何元素，包括 svg 和带有 css 动画的元素。
 
 <code src="./demos/content.tsx"></code>
 
@@ -93,7 +93,9 @@ InfiniteScroll 本身已经包含了防止并发的重复请求的逻辑，所
 </Tabs>
 ```
 
-问题描述：`Tabs` 组件默认展示第一个 `Tab` 项的内容，所以，第二个 `Tab` 项的内容 `InfiniteScroll` 是不可见的。但第二个 `Tab` 添加了 `forceRender` 属性，所以即使不可见，其内容也会渲染。本次渲染 `InfiniteScroll`组件时，由于该组件不可见，所以，不会调用 `loadMore` 函数，这是正常的，跟我们的预期相同。_但是，当我们切换到第二个 `Tab` 展示 `InfiniteScroll` 组件时，发现 `InfiniteScroll` 组件并没有调用 `loadMore` 函数，这一点跟我们预期不同，我们希望此时 `loadMore` 函数被调用_。
+问题描述：`Tabs` 组件默认展示第一个 `Tab` 项的内容，所以，第二个 `Tab` 项的内容 `InfiniteScroll` 是不可见的。但第二个 `Tab` 添加了 `forceRender` 属性，所以即使不可见，其内容也会渲染。本次渲染 `InfiniteScroll`组件时，由于该组件不可见，所以，不会调用 `loadMore` 函数，这是正常的，跟我们的预期相同。
+
+_但是，当我们切换到第二个 `Tab` 展示 `InfiniteScroll` 组件时，发现 `InfiniteScroll` 组件并没有调用 `loadMore` 函数，这一点跟我们预期不同，我们希望此时 `loadMore` 函数被调用_。
 
 原因说明：点击切换 `Tabs` 组件的 `Tab` 项时，会修改 `Tabs` 组件的高亮状态，此时，`Tabs` 组件会重新渲染。但是，要注意的是**只有在 `Tabs` 组件自身的内容才会被重新渲染，而 `InfiniteScroll` 组件是在 `Tabs` 组件外部的，并非 `Tabs` 组件自身内容**。所以，切换 `Tab` 时，`InfiniteScroll` 组件并不会重新渲染，也就没有再次触发它的检查机制。