Skip to content
On this page

VScrollView

ScrollView screen is able to simulate native scrolling areas and support pull-down refresh and load more

Import

js
import { VScrollView } from 'vui-vc-next'

app.component(VScrollView.name, VScrollView)

Instruction

  • ScrollViewRefresh is a pull-down refresh component built into the component library for visual display only. It needs to be used in the slot refresh. The pull-down refresh component can also be customized.

  • ScrollViewMore load-more component built into the component library for visual display only. It needs to be used in slot more. The load-more component can also be customized.

API

ScrollView Props

PropsDescriptionTypeDefaultNote
scrolling-xhorizontal scrollingBooleantrue-
scrolling-yvertical scrollingBooleantrue-
bouncing-Booleantrue-
auto-reflowautomatically reset scroller size when content changesBooleanfalsemanually call reflowScroller when set to false and it is recommended to turn auto-reflow off when ScrollView is hidden, otherwise the last scroll position will not be saved
manual-initmanual initializationBooleanfalsegenerally used for asynchronous initialization scenarios, you need to manually call the init method to complete the initialization
end-reached-thresholdthreshold for emitting end-reached.Number0unit px
immediate-check-end-reachingcheck if it reaches the bottom at initializationBooleanfalse-
touch-angleangle value range that triggers scrollingNumber45unit deg
is-preventprevent browser default scrollingBooleantrueif set to false, the browser defaults to scroll when scrolling is triggered over a non-scrollable angle range

ScrollViewRefresh Props

PropsDescriptionTypeDefaultNote
scroll-topdistance from topNumber0unit px
is-refresh-activerelease refreshable stateBooleanfalse-
is-refreshingrefreshing stateBooleanfalse-
refresh-text-StringPull-to-refresh-
refresh-active-textrelease refreshable textStringRelease-to-refresh-
refreshing-textrefreshing textStringRefreshing...-
roller-colorprogress bar colorString#2F86F6-

ScrollViewMore Props

PropsDescriptionTypeDefaultNote
is-finishedall loadedBooleanfalse-
loading-textloading textStringLoading more...-
finished-textloaded textStringAlready loaded.-