better-scroll-list

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

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()
      }
    }
  }