vue2-better-scroll

Use Setup

Install vue2-better-scroll

yarn add vue2-better-scroll

// or

npm install vue2-better-scroll -s

Vue mount

// import

import Vue from 'vue'

import VueBetterScroll from 'vue2-better-scroll'

 

// or require

var Vue = require('vue')

var VueBetterScroll = require('vue2-better-scroll')

 

// mount with global

Vue.use(VueBetterScroll)

 

// mount with component(can't work in Nuxt.js/SSR)

import { VueBetterScroll } from 'vue2-better-scroll'

 

export default {

  components: {

    VueBetterScroll

  }

}

 

 

// 或者直接导入js文件

<script src="./dist/vue-better-scroll.js"></script>

 

Use in SPA

<template>

  <div id="app">

    <header>vue-better-scroll demo</header>

    <main class="position-box">  <!-- 需要一个创建一个父容器 组件高度默认等于父容器的高度 -->

      <vue-better-scroll class="wrapper"

                         ref="scroll"

                         :scrollbar="scrollbarObj"

                         :pullDownRefresh="pullDownRefreshObj"

                         :pullUpLoad="pullUpLoadObj"

                         :startY="parseInt(startY)"

                         @pulling-down="onPullingDown"

                         @pullin-up="onPullingUp">

        <ul class="list-content">

          <li class="list-item"

              v-for="item in items">{{item}}</li>

        </ul>

      </vue-better-scroll>

    </main>

    <button class="go-top"

            @click="scrollTo">返回顶部</button>

  </div>

</template>

 

<script>

  import VueBetterScroll from '../dist/vue-better-scroll'

  // import VueBetterScroll from './lib'

 

  let count = 1

  export default {

    name: 'app',

    components: { VueBetterScroll },

    data() {

      return {

        // 这个配置可以开启滚动条，默认为 false。当设置为 true 或者是一个 Object 的时候，都会开启滚动条，默认是会 fade 的

        scrollbarObj: {

          fade: true

        },

        // 这个配置用于做下拉刷新功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启下拉刷新，可以配置顶部下拉的距离（threshold） 来决定刷新时机以及回弹停留的距离（stop）

        pullDownRefreshObj: {

          threshold: 90,

          stop: 40

        },

        // 这个配置用于做上拉加载功能，默认为 false。当设置为 true 或者是一个 Object 的时候，可以开启上拉加载，可以配置离底部距离阈值（threshold）来决定开始加载的时机

        pullUpLoadObj: {

          threshold: 0,

          txt: {

            more: '加载更多',

            noMore: '没有更多数据了'

          }

        },

        startY: 0, // 纵轴方向初始化位置

        scrollToX: 0,

        scrollToY: 0,

        scrollToTime: 700,

        items: []

      }

    },

    mounted() {

      this.onPullingDown()

    },

    methods: {

      // 滚动到页面顶部

      scrollTo() {

        this.$refs.scroll.scrollTo(this.scrollToX, this.scrollToY, this.scrollToTime)

      },

      // 模拟数据请求

      getData() {

        return new Promise(resolve => {

          setTimeout(() => {

            const arr = []

            for (let i = 0; i < 10; i++) {

              arr.push(count++)

            }

            resolve(arr)

          }, 1000)

        })

      },

      onPullingDown() {

        // 模拟下拉刷新

        console.log('下拉刷新')

        count = 0

        this.getData().then(res => {

          this.items = res

          this.$refs.scroll.forceUpdate(true)

        })

      },

      onPullingUp() {

        // 模拟上拉 加载更多数据

        console.log('上拉加载')

        this.getData().then(res => {

          this.items = this.items.concat(res)

          if (count < 30) {

            this.$refs.scroll.forceUpdate(true)

          } else {

            this.$refs.scroll.forceUpdate(false)

          }

        })

      }

    }

  }

</script> 

 

<style>

  .position-box {

    position: fixed;

    top: 40px;

    left: 0;

    right: 0;

    bottom: 0;

  }

</style>