ScrollView

Scrollable container with pull-to-refresh and reach-edge events.

Code examples

Vertical scrolling

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

Vertical scroll

Set a fixed height and enable `scroll-y`

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

Horizontal scrolling

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

Horizontal scroll

Use `scroll-x` for horizontal scrolling

<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

Props

属性	说明	类型	默认值
scroll-x	Enable horizontal scrolling	boolean	false
scroll-y	Enable vertical scrolling	boolean	false
scroll-top	Vertical scroll position	number	0
scroll-left	Horizontal scroll position	number	0
scroll-into-view	Scroll to a child element by id	string	-
upper-threshold	Distance from top to fire `scrolltoupper` (px)	number	50
lower-threshold	Distance from bottom to fire `scrolltolower` (px)	number	50
refresher-enabled	Enable pull-to-refresh	boolean	false

Events

属性	说明	类型	默认值
scroll	Fires while scrolling	{ scrollTop, scrollLeft, scrollHeight }	-
scrolltoupper	Fires when the top or left edge is reached	{ direction }	-
scrolltolower	Fires when the bottom or right edge is reached	{ direction }	-
refresherrefresh	Pull-to-refresh triggered	-	-