Vue-Awesome-Scroll

better-scroll component for Vue, support pc and mobile, SPA.

基于 better-scroll、适用于 Vue 的滚动组件。

Install

CDN

<script type="text/javascript" src="path/to/better-scroll.js"></script>
<script type="text/javascript" src="path/to/vue.min.js"></script>
<script type="text/javascript" src="path/to/dist/vue-awesome-scroll.js"></script>
<script type="text/javascript">
  Vue.use(window.VueAwesomeScroll)
</script>

NPM

npm install vue-awesome-scroll --save

Mount

mount with global

import Vue from 'vue'
import VueAwesomeScroll from 'vue-awesome-scroll'


Vue.use(VueAwesomeScroll, /* { default global options } */)

mount with component

import { bscroll } from 'vue-awesome-scroll'

export default {
  components: {
    bscroll
  }
}

SPA

<!-- The ref attr used to find the scroll instance -->
<template>
  <bscroll :options="scrollOption" ref="myScroll" @someScrollEvent="callback">

  </bscroll>
</template>

<script>
  export default {
    name: 'carrousel',
    data() {
      return {
        scrollOption: {
          // some scroll options/callbacks
          // 所有的参数同 scroll 官方 api 参数
          // ...
           pullUpLoad: {
                    threshold: 0, //负数表示向上拉多少更新，正数表示距离底部还有多少时就去更新
                    txt: {
                        more: "加载更多...",
                        noMore: "没有更多历史版本了"
                    }
           },
           pullDownRefresh: {
                        threshold: 60,
                        stopTime: 1000,
                        txt: '更新成功'
           },
           bounceTime: 1000,
        }
      }
    },
    computed: {
      scroll() {
        return this.$refs.myScroll.scroll
      }
    },
    mounted() {
      // current scroll instance
      // 然后你就可以使用当前上下文内的scroll对象去做你想做的事了
      console.log('this is current scroll instance object', this.scroll)
    }
  }
</script>

Props 配置：

参数	说明	类型	可选值	默认值
options	better-scroll 配置项，具体请参考BS 官方文档	Object	-	{ observeDOM: true, click: true, probeType: 1, scrollbar: false, pullDownRefresh: false, pullUpLoad: false }

options中 better-scroll 的几个常用配置项，pullDownRefresh、pullUpLoad这两个配置即可设为 Boolean（false 关闭该功能，true 开启该功能，并使用默认子配置），也可设为Object，开启该功能并具体定制其子配置项。

• pullDownRefresh 子配置项

参数	说明	类型	可选值	默认值
threshold	下拉刷新动作的下拉距离阈值	Number	-	90
stop	回弹停留的位置	Number	-	组件会自动计算回弹时显示的元素高度作为默认值
stopTime	刷新成功的文案显示时间	Number	-	600
txt	刷新成功的文案	String	-	'Refresh success'

• pullUpLoad 子配置项

参数	说明	类型	可选值	默认值
threshold	上拉刷新动作的上拉距离阈值	Number	-	0
txt	上拉加载的相关文案	Object	-	{ more: '', noMore: '' }

TO DO

• pull up to load
• pull down to refresh
• add exmaple
• add test
• add key point to use better-scroll

API

Scroll's API and configuration can be used.（Scroll官网中的API及配置均可使用）

• CN Scroll documents
• EN Scroll documents

Author

Surmon