better-scroll的简单使用方法-vue

better-scroll的简单使用方法

先说用法，最后有源码

---

用法

html部分

• scroll实例需使用ref属性指定container
• 滑动作用在container的第一个子元素上
• container需要固定高度
• container需要固定高度
• container需要固定高度

<div ref="scrollWrap">
  <div>scroll作用在第一个子元素</div>
  <div>不会作用的元素</div>
  <div>更不会作用的元素</div>
</div>

js部分

1.引用

import userScroll from '@/views/components/useScroll.js';

export default {
  mixins: [userScroll]
}

2.配置

具体配置项参考Better-Scroll

data: {
  return {
    scrollOption: {
      scrollY: true,
      click: true,
      bounce: true,
      tap: true,
      mouseWheel: true,
      swipeTime: 2500,
      swipeBounceTime: 400,
      scrollbar: true
    },
  }
}

3.初始化

mounted () {
  // 初始化滚动条
  this.scrollInit();
},

4.刷新

在页面变化时使用（如请求了新的数据，页面高度发生变化）

this.scrollRefresh();

5.顶部下拉刷新

配置项

scrollOption: {
  pullDownRefresh: {
    // 下拉触发阈值 - px
    threshold: 60,
    // 回弹停留点 - px
    stop: 50
  },
}

在初始化滚动条实例时使用，在组件中自定义回调函数

// 下拉回调函数
methods: {
  // 下拉刷新
  callback () {
    console.log('pullDown!');
    // 执行完成后结束下拉状态
    this.scroll.finishPullDown();
  },
},
// 加载监听
mounted () {
  this.scrollPullDown(this.callback);
}

6.底部上拉加载

配置项

scrollOption: {
  pullDownRefresh: {
    // 上拉触发阈值 - px
    threshold: 60,
  },
}

在初始化滚动条实例时使用，在组件中自定义回调函数

// 上拉回调函数
methods: {
  // 上拉加载
  callback () {
    console.log('pullUp!');
    // 执行完成后结束上拉状态
    this.scroll.finishPullUp();
  },
},
// 加载监听
mounted () {
  this.scrollPullUp(this.callback);
}

7.销毁

已设置自动执行，解决后顾之忧(oﾟvﾟ)ノ

---

源码

将这段js代码放入项目文件夹中，使用mixins方式放入需要使用的地方

// 引入
import BScroll from 'better-scroll';

// 配置
const scrollOption = {
  scrollY: true,
  click: true,
  bounce: true,
  tap: true,
  mouseWheel: true,
  swipeTime: 1000,
  swipeBounceTime: 400,
  scrollbar: true,
  pullDownRefresh: false,
  pullUpLoad: false
};

export default {
  data() {
    return {
      scroll: null,
      scrollCustomOption: null
    };
  },
  methods: {
    // 放在mounted里面
    scrollInit (customOption) {
      this.scrollCustomOption = customOption;
      if (this.scroll) {
        this.scroll.destroy();
      }
      this.scroll = null;
      // 初始化滚动条
      this.$nextTick(() => {
        this.scroll = new BScroll(this.$refs.scrollWrap, Object.assign({}, scrollOption, customOption));
      });
    },
    // 页面发生改变时使用
    scrollRefresh () {
      this.scroll.destroy();
      this.scrollInit(this.scrollCustomOption);
    },
    // 下拉刷新方法，初始化时执行
    scrollPullDown (callback) {
      this.scroll.on('pullingDown', callback);
    },
    // 上拉加载方法，初始化时执行
    scrollPullUp (callback) {
      this.scroll.on('pullingUp', callback);
    }
  },
  beforeDestroy () {
    // 销毁scroll实例
    this.scroll.destroy();
    this.scroll = null;
  }
};