| title | ScrollView 滚动区域/下拉刷新 |
|---|---|
| preview | https://didi.github.io/mand-mobile/examples/#/scroll-view |
用于模拟原生的滚动区域，并支持下拉刷新和加载更多 1.5.0+
import { ScrollView, ScrollViewRefresh, ScrollViewMore } from 'mand-mobile'
Vue.component(ScrollView.name, ScrollView)ScrollViewRefresh为组件库内置的下拉刷新组件，仅用于作为视觉展示，需在插槽refresh中使用，下拉刷新组件也可自定义
ScrollViewMore为组件库内置的加载更多组件，仅用于作为视觉展示，需在插槽more中使用，加载更多组件也可自定义
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| scrolling-x | 水平滚动 | Boolean | true |
- |
| scrolling-y | 垂直滚动 | Boolean | true |
- |
| bouncing | 可回弹 | Boolean | true |
- |
| autoReflow 1.5.3+ | 内容发生变化时自动重置滚动区域尺寸 | Boolean | false |
当设置为false时，内容发生变化需手动调用reflowScroller |
| endReachedThreshold | 触发到达底部的提前量 | Number | 0 | 单位px |
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| scroll-top | 距离顶部距离 | Number | 0 | 单位px |
| is-refresh-active | �释放可刷新状态 | Boolean | false |
- |
| is-refreshing | 刷新中状态 | Boolean | false |
- |
| refresh-text | 待刷新文案 | String | 下拉刷新 |
- |
| refresh-active-text | 释放可刷新文案 | String | 释放刷新 |
- |
| refreshing-text | 刷新中文案 | String | 刷新中... |
- |
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| is-finished | 全部已加载 | Boolean | false |
- |
| loading-text | 加载中文案 | String | 更多加载中... |
- |
| finished-text | 全部已加载文案 | String | 全部已加载 |
- |
滚动区域内容插槽，当内容发生变化是，需要调用reflowScroller重置滚动区域，参考reflowScroller
下拉刷新组件插槽，可如下使用slot-scoped获取相关滚动状态（不兼容slot-scoped时滚动状态也可通过事件中动态设置）
<md-scroll-view-refresh
slot="refresh"
slot-scope="{ scrollTop, isRefreshActive, isRefreshing }"
:scroll-top="scrollTop"
:is-refreshing="isRefreshing"
:is-refresh-active="isRefreshActive"
></md-scroll-view-refresh>加载更多组件插槽
吸顶区域插槽
吸底区域插槽
重置滚动区域，一般滚动区域中的内容发生变化之后需调用
滚动至指定位置
| 参数 | 说明 | 类型 |
|---|---|---|
| left | 距左侧距离 | Number |
| top | 距顶部距离 | Number |
| animate | 使用动画 | Boolean |
触发下拉刷新
停止下拉刷新
停止加载更多
滚动事件
| 属性 | 说明 | 类型 |
|---|---|---|
| scrollLeft | 距左侧距离 | Number |
| scrollTop | 距顶部距离 | Number |
释放可刷新事件
刷新中事件
滚动触底事件