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	上端から何 px で `scrolltoupper` を発火するか	number	50
lower-threshold	下端から何 px で `scrolltolower` を発火するか	number	50
refresher-enabled	プルダウン更新を有効にする	boolean	false

イベント

属性	说明	类型	默认值
scroll	スクロール中	{ scrollTop, scrollLeft, scrollHeight }	-
scrolltoupper	上端／左端に達したとき	{ direction }	-
scrolltolower	下端／右端に達したとき	{ direction }	-
refresherrefresh	プルダウン更新が行われたとき	-	-