ScrollView

Used to simulate native scrolling areas and support pull-down refresh and load more

Import

import { ScrollView, PullDown, PullUp } from 'mand-mobile-next'

Vue.createApp().component(ScrollView.name, ScrollView)
Vue.createApp().component(PullDown.name, PullDown)
Vue.createApp().component(PullUp.name, PullUp)

TIP

  • PullDown is a PullDown refresh component built into the component library. It is only used for visual display. It must be used in the slot pulldown, pull-down refresh component is also customizable
  • PullUp loads more components for the component library built in. It is only used as a visual display and needs to be used in the slot pullup, Loading more components can also be customized.

Code Examples

API

ScrollView Props

PropsDescriptionTypeDefaultNote
scrolling-xhorizontal scrollingBooleantrue-
scrolling-yvertical scrollingBooleantrue-
bouncing-Booleantrue-
pull-downcan be pulled down to refreshBooleanfalse-
pull-upcan be pulled up to loadBooleanfalse-
bounceTimespringback of timeNumber800单位 ms
is-preventprevent browser default scrollingBooleantrueif set to false, the browser defaults to scroll when scrolling is triggered over a non-scrollable angle range
pullDownOptionsthe options of pulled downObject{ threshold: number, stop: number}-
pullUpOptionsthe options of pull upObject{ threshold: number }-
isFinishedis finished pull upBooleanfalse-

PullDown Props

PropsDescriptionTypeDefaultNote
percentpercentage of Progress barNumber-
is-pulling-downstatus in refreshBooleanfalse-
pull-down-textshow pull-down textString-
roller-colorprogress colorString#2F86F6-

PullUp Props

PropsDescriptionTypeDefaultNote
pull-up-textshow pull-up textString-

ScrollView Slots

default

scroll the area content slot

pulldown

refresh component slots

pullup

load more component slots

suction top area slot

suction bottom area slot

ScrollView Events

pullingDown

the drop-down refresh event is triggered

pullingUp

the pull-up event is triggered

scroll

trigger scroll event

other references BetterScroll