ScrollView 可滚动视图区域

ScrollView 可滚动视图区域

一、概述

定义

使视图内容区域可以横向/纵向滚动。

使用场景

当某块视图区域内容超出固定宽度/高度，需要进行横向/纵向滚动时使用。

二、基础样式

交互说明

当某块区域内容需要上下/左右滚动时，用scroll-view包裹这块区域内容。可通过scroll-x 或者 scroll-y 来决定时横向滚动还是纵向滚动，使用竖向滚动时，需要给scroll-view一个固定高度，通过 CSS 设置 height。

基础用法

1.纵向滚动

  <se-scroll-view
    class="scroll-view"
    :scroll-y="scrollY"
    :scroll-into-view="scrollIntoView"
    :scroll-top="scrollTop"
    :upper-threshold="upperThreshold"
    :lower-threshold="lowerThreshold"
    :enable-flex="enableFlex"
    @scrolltoupper="onScrollToUpper"
    @scrolltolower="onScrollToLower"
    @scroll="onScroll"
  >
  </se-scroll-view>

2.横向滚动

注：文本框的值修改之后需要失去焦点才能生效。scroll-top和scroll-left为单向数据流，不是双向绑定。如果想要实时获取scroll-top和scroll-left的值，请在scroll事件中获取。

Props

属性	类型	默认值	必填	说明
scroll-x	`boolean`	`false`	`false`	允许横向滚动
scroll-y	`boolean`	`false`	`false`	允许纵向滚动
upper-threshold	`number/string`	`50`	`false`	距顶部/左边多远时，触发 scrolltoupper 事件
lower-threshold	`number/string`	`50`	`false`	距底部/右边多远时，触发 scrolltolower 事件
scroll-top	`number/string`		`false`	设置竖向滚动条位置
scroll-left	`number/string`		`false`	设置横向滚动条位置
scroll-into-view	`string`		`false`	值应为某子元素 id（id 不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
enable-flex	`boolean`	`false`	`false`	启用 flexbox 布局。开启后，当前节点声明了 display: flex 就会成为 flex container，并作用于其孩子节点。

Events

名称	类型	说明
scrolltoupper	`EventHandle`	滚动到顶部/左边时触发
scrolltolower	`EventHandle`	滚动到底部/右边时触发
scroll	`EventHandle`	滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth }