vue-mobile-scroll

一个移动端滚动组件，基于 better-scroll 2.0 版本封装,支持简单的下拉刷新，上拉加载

npm install vue-mobile-scroll --save

基础用法

import Scroll from "vue-mobile-scroll";
import "vue-mobile-scroll/lib/vue-mobile-scroll.css";
const { VerticalScroll } = Scroll;

html,
body,
#app {
  height: 100%;
  width: 100%;
}
// 直接包裹 vue-mobile-scroll 的 div
.outer-box {
  width: 100%;
  height: 100%;
}

<div class="outer-box">
  <vertical-scroll
    ref="scrollRef"
    :data="list"
    @scroll="scroll"
    @pullingDownRefresh="pullingDownRefresh"
    @pullUpLoad="pullUpLoad"
  >
    <div v-for="(item, index) in list" :key="index">随机数据 {{ item }}</div>
  </vertical-scroll>
</div>

// 内置很多方法可以调用，如： getScrollExample, autoPullUpLoad, ... (见 packages 文件夹中原组件)
如： this.$refs.scrollRef.autoPullDownRefresh();

//
{
  components: {
    VerticalScroll,
  },
  methods: {
    // 下拉刷新
    pullingDownRefresh(finish) {
      // 模拟接口请求
      setTimeout(() => {
        this.list = [this.getRandomString(), this.getRandomString()];

        // 刷新完成后调用这个回调函数
        finish();
      }, 2000);
    },
    // 上拉加载
    pullUpLoad(finish) {
      // 模拟接口请求
      setTimeout(() => {
        this.list = [
          ...this.list,
          this.getRandomString(),
        ];
        // 完成后调用这个回调函数，它接收一个参数,没有更多数据就传true,否则不传
        finish(true);
      }, 2000);
    }
  }
}

参数

注：传入参数时只需要传需要的即可，无需全部传一遍，以下都是默认的配置，传入的属性会替换默认配置

option

better-scroll 原始配置

{
  // probeType 可选值：1、2、3
  // 1：非实时（屏幕滑动超过一定时间后）派发scroll 事件；
  // 2：会在屏幕滑动的过程中实时的派发 scroll 事件；
  // 3：不仅在屏幕滑动的过程中，而且在 momentum 滚动动画运行过程中实时派发 scroll 事件
  probeType: 2,
  click: true, // 是否可以点击
  freeScroll: false, //自由滚动
  scrollX: false,
  bounce: true, //是否开启回弹动画
  scrollbar: false, //是否显示滚动条

  // 以下两个参数无需手动配，只需监听相应的事件都可以用了
  pullDownRefresh: false, // 是否支持下拉刷新
  pullUpLoad: false, // 是否支持上拉加载
}

refreshConfig

下拉刷新配置

{
  threshold: 80, // 配置顶部下拉的距离来决定刷新时机
  stop: 50, // 回弹悬停的距离
  loadingType: 6, // loading图的类型 (1 到 12 的整数)
  initText: '继续下拉', // 初始文字
  triggerText: '松手刷新', // 过下拉临界点的文字
  finishText: '已刷新', // 刷新完成后的文字
}

pullUpLoadConfig

上拉加载配置

{
  loadingType: 4, // loading图的类型 (1 到 12 的整数)
  stop: 50, // 回弹悬停的距离
  threshold: -40, // 正数代表距离底部 threshold 像素时触发，负数代表越过越过底部触发事件
}