better-scroll-list

0.5.8 • Public • Published

better-scroll-list

A pull-up load and drop-down refresh data plugin

npm downloads

About better-scroll-list

Better-scroll-list encapsulates better-scroll pull-down and pull-up capabilities, and encapsulates some of its events and methods

install

Use npm for installation

  npm install --save better-scroll-list

Import using ES6

  import VueScroll from 'better-scroll-list'
  Vue.use(VueScroll)

Used as such in the component

  <vue-scroll></vue-scroll>

Supported parameters

parameter type default description
scrollbar Boolean true Whether to display the scroll bar
scrollbarFade Boolean true Show hidden scroll bar transition effect
pullDownRefresh Boolean true Whether to initialize the pull-down refresh
pullDownRefreshThreshold Number 90 Top pull-down distance
pullDownRefreshStop Number 40 Refresh time and the distance to stay rebound
pullDownRefreshTxt String 刷新成功 Text displayed when refresh is successful
pullDownRefreshFailTxt String 刷新失败 Text displayed when refresh is failed
pullUpLoad Boolean true Whether to initialize the pull-up load
pullUpLoadThreshold Number 0 Bottom distance threshold
pullUpLoadMoreTxt String 加载更多 Text displayed when there is more data
pullUpLoadNoMoreTxt String 没有更多了 Text displayed when there is no more data
direction String vertical The default is vertical scrolling, if you want horizontal scrolling, you need to pass horizontal, but the horizontal scrolling temporarily does not support the pull-down refresh download
click Boolean false When set to true, better-scroll will dispatch a click event, and we will add a private property to the dispatched event parameter, _constructed, to true
probeType Number 0 Please refer to the better-scroll probeType
tap Boolean false Because better-scroll prevents native click events, we can set tap to true, which dispatches a tap event when the zone is clicked, and you can listen to it as you would a native event
refreshDelay Number 20 Data change refreshing scroll interval, in milliseconds
initMinHeight Boolean true Whether to automatically add the minimum height of the scroll zone
listenScroll Boolean false Whether to listen for scroll events
listenBeforeScroll Boolean false Whether to listen beforeScrollStart event
listenScrollStart Boolean false Whether to listen for the scrollStart event
listenScrollEnd Boolean false Whether to listen for the scrollEnd event
listenTouchEnd Boolean false Whether to listen for the touchEnd event
listenFlick Boolean false Whether to listen for the flick event
listenRefresh Boolean false Whether to listen for the refresh event
listenDestroy Boolean false Whether to listen for the destroy event

Please refer to the detailed configuration better-scroll docs

Supported events

name parameter
pulling-up -
pulling-down -
before-scroll-start -
scroll-start pos
scroll pos
scroll-end pos
touch-end pos
flick -
refresh -
destroy -
tap -
click -

Supported methods

name description
disable disable scroll
enable enable scroll
refresh refresh scroll area
destroy destroy scroll
scrollTo instance
scrollToElement See the official document
rebuild See the official document
forceUpdate called wehn pull-down refresh success and pull-up load success
errorUpdate called wehn pull-down refresh failed and pull-up load failed

Listen event case

  <vue-scroll ref="scroll" :listenScroll="listenScroll" @scroll="onScroll" @before-scroll-start="onBeforeScrollStart" :pulling-up="onPullingUp"></vue-scroll>
  export default {
    methods: {
      onBeforeScrollStart() {
        ...
      }
    }
  }

pass parameter case

  export default {
    created() {
      this.listenScroll = true
    },
    methods: {
      onBeforeScrollStart() {
        ...
      },
      onScroll(pos) {
        console.log(pos)
      }
    }
  }

Call the method example

  export default {
    methods: {
      onBeforeScrollStart() {
        ...
      },
      onPullingUp() {
        this.$refs.scroll.errorUpdate()
      }
    }
  }

Package Sidebar

Install

npm i better-scroll-list

Weekly Downloads

0

Version

0.5.8

License

MIT

Last publish

Collaborators

  • xwpongithub