---
name: ScrollView
title: 可滚动视图区域
category: 视图容器
owner: 陈骁
---

## 示例

```atom 基础示例
<template>
    <view class="c-container">
        <view class="title">横向滚动</view>
        <scroll-view
            scroll-x
            class="scroll-view"
            @scrolltoupper="toLeft"
            @scrolltolower="toRight"
            @scroll="onScroll"
        >
            <view id="one" class="color-a row-view">A</view>
            <view id="two" class="color-b row-view">B</view>
            <view id="three" class="color-c row-view">C</view>
        </scroll-view>
        <view class="title">纵向滚动</view>
        <scroll-view
            scroll-y
            class="scroll-view"
            @scrolltoupper="upper"
            @scrolltolower="lower"
            @scroll="onScroll"
        >
            <view id="four" class="color-a">A</view>
            <view id="five" class="color-b">B</view>
            <view id="six"  class="color-c">C</view>
        </scroll-view>
    </view>
</template>

<script type="config">
    {
        components: {
            'scroll-view': 'components/ScrollView/ScrollView',
            'view': 'components/View/View'
        }
    }
</script>

<script>
    export default {
        methods: {
            onScroll(e) {
                console.log('获取滚动事件的详细信息e.detail：', e.detail);
            },
            toLeft() {
                console.log('到最左边了');
            },
            toRight() {
                console.log('到最右边了');
            },
            upper() {
                console.log('到顶了');
            },
            lower() {
                console.log('到底了');
            }
        }
    };
</script>

<style module>
.scroll-view {
    height: 1.66rem;
    white-space: nowrap;
    font-size: 0;
}
.color-a,
.color-b,
.color-c {
    height: 1.66rem;
    line-height: 1.66rem;
    text-align: center;
    font-size: .16rem;
    color: #fff;
}

.title {
    padding: .05rem 0;
}

.color-a {
    background-color: #6895FF;
}
.color-b {
    background-color: #8FB1FF;
}
.color-c {
    background-color: #C3D1FF;
}

.row-view {
    display: inline-block !important;
    width: 100%;
    height: 1.66rem;
    line-height: 1.66rem;
    font-size: 20px;
}
</style>
```

```atom 移动到指定位置
<template>
    <view class="c-container">
        <scroll-view
            scroll-x
            scroll-with-animation
            :scroll-into-view="viewId1"
            class="wrapper"
        >
            <button
                a-for="n in 10"
                :id="'button' + n"
                class="my-button"
                @tap="onClick(n)"
            >
                按钮{{ n }}
            </button>
        </scroll-view>
    </view>
</template>

<script type="config">
    {
        components: {
            'scroll-view': 'components/ScrollView/ScrollView',
            'button': 'components/Button/Button',
            'view': 'components/View/View'
        },
        data: {
            viewId1: 'button1',
            viewId2: 'button1'
        }
    }
</script>

<script>
    export default {
        methods: {
            onClick(n) {
                console.log(n);
                this.viewId1 = 'button' + n;
            }
        }
    };
</script>

<style lang="less" module>
.wrapper {
    white-space: nowrap;
}
.c-container .my-button {
    display: inline-block;
    width: 100px;
    margin: 10px;
    font-size: 14px;

    &:first-child {
        margin-left: 0;
    }

    &:last-child {
        margin-right: 0;
    }
}
</style>
```## API
### Props



名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
scrollX | boolean | false | 可选 | 允许横向滚动 | -
scrollY | boolean | false | 可选 | 允许纵向滚动 | -
upperThreshold | number \| string | 50 | 可选 | 距顶部/左边多远时（单位&nbsp;px），触发`scrolltoupper`事件 | -
lowerThreshold | number \| string | 50 | 可选 | 距底部/右边多远时（单位&nbsp;px），触发`scrolltolower`事件 | -
scrollTop | number \| string | - | 可选 | 设置竖向滚动条位置 | -
scrollLeft | number \| string | - | 可选 | 设置横向滚动条位置 | -
scrollIntoView | string | - | 可选 | 值应为某子元素id（id不能以数字开头），设置滚动方向后，按方向滚动到该元素 | -
scrollWithAnimation | boolean | false | 可选 | 在设置滚动条位置时使用动画过渡 | -

### Slots



名称 | 描述
--- | ---
default | 内容插槽

### Events
无
### Methods

- **scrollTo**: 滚动到某个元素位置

  名称 | 类型 | 描述
  --- | --- | ---
  scrollValue,number,横/竖向滚动条位置,direction,number,滚动方向