---
title: WKScrollView 可滚动视图区域
group:
  title: 展示组件
  path: /show/
---

## 何时使用

可滚动视图区域,用于区域滚动。

## 竖向滚动

```tsx
/**
 * title: 竖向滚动
 * desc: 使用竖向滚动时，需要给scroll-view一个固定高度，组件属性的长度单位默认为 px
 */
import React from 'react';
import { WKScrollView, WKView } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  const scrollTop = 0;
  const Threshold = 20;

  return (
    <PageWrapper title="基本使用">
      <WKScrollView
        scrollY
        scrollTop={scrollTop}
        style={{ height: '150px' }}
        lowerThreshold={Threshold}
        upperThreshold={Threshold}
      >
        <WKView className="w-full bg-primary-1" style={{ height: '150px' }} />
        <WKView className="w-full bg-primary-2" style={{ height: '150px' }} />
        <WKView className="w-full bg-primary-3" style={{ height: '150px' }} />
      </WKScrollView>
    </PageWrapper>
  );
};
```

## 横向滚动

```tsx
/**
 * title: 横向滚动
 * desc: 组件设置scrollX横向滚动时，且子元素为多个时(单个子元素设置固定宽度泽可以正常滚动)，需要通过设置white-space:nowrap来保证元素不换行，并对ScrollView内部元素设置display:inline-block来使其能够横向移动
 */

import React from 'react';
import { WKScrollView, WKView } from '@wakeapp/components';
import PageWrapper from '../PageWrapper';
export default () => {
  const scrollLeft = 0;
  const Threshold = 20;

  return (
    <PageWrapper title="横向滚动">
      <WKScrollView
        className="w-full h-1__5"
        scrollX
        scrollLeft={scrollLeft}
        style={{ height: '150px', whiteSpace: 'nowrap' }}
        lowerThreshold={Threshold}
        upperThreshold={Threshold}
      >
        <WKView className="w-full bg-primary-1 inline-block" style={{ height: '150px' }} />
        <WKView className="w-full bg-primary-2 inline-block" style={{ height: '150px' }} />
        <WKView className="w-full bg-primary-3 inline-block" style={{ height: '150px' }} />
      </WKScrollView>
    </PageWrapper>
  );
};
```

<API src='@wakeapp/components/WKScrollView/index.d.ts' ></API>
