ScrollView 滚动视图

可滚动的容器区域，支持下拉刷新和触底事件。

代码演示

纵向滚动

Scroll Item 1

Scroll Item 2

Scroll Item 3

Scroll Item 4

Scroll Item 5

Scroll Item 6

Scroll Item 7

Scroll Item 8

Scroll Item 9

Scroll Item 10

Scroll Item 11

Scroll Item 12

Scroll Item 13

Scroll Item 14

Scroll Item 15

Scroll Item 16

Scroll Item 17

Scroll Item 18

Scroll Item 19

Scroll Item 20

纵向滚动

设置固定高度并开启 scroll-y

<m-scroll-view scroll-y style="height: 200px;"
  @scrolltolower="loadMore">
  <div v-for="item in list">{{ item.text }}</div>
</m-scroll-view>

横向滚动

Tag 1

Tag 2

Tag 3

Tag 4

Tag 5

Tag 6

Tag 7

Tag 8

Tag 9

Tag 10

Tag 11

Tag 12

Tag 13

Tag 14

Tag 15

横向滚动

scroll-x 开启水平滚动

<m-scroll-view scroll-x style="height: 60px;">
  <div style="display: flex; gap: 12px;">
    <div v-for="i in 15">Tag {{ i }}</div>
  </div>
</m-scroll-view>

API

属性

属性	说明	类型	默认值
scroll-x	允许横向滚动	boolean	false
scroll-y	允许纵向滚动	boolean	false
scroll-top	竖向滚动条位置	number	0
scroll-left	横向滚动条位置	number	0
scroll-into-view	滚动到指定子元素 id	string	-
upper-threshold	距顶部多远触发 scrolltoupper（px）	number	50
lower-threshold	距底部多远触发 scrolltolower（px）	number	50
refresher-enabled	开启下拉刷新	boolean	false

事件

属性	说明	类型	默认值
scroll	滚动时触发	{ scrollTop, scrollLeft, scrollHeight }	-
scrolltoupper	滚动到顶部/左边时触发	{ direction }	-
scrolltolower	滚动到底部/右边时触发	{ direction }	-
refresherrefresh	下拉刷新被触发	-	-