better-scroll的使用

代码语言：javascript复制

<template>
  <div class="wrapper" ref="wrapper">
   
      <ul class="content">
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
        <li>123456</li>
      </ul>
  
  </div>
</template>

代码语言：javascript复制

<style  scoped>
/* 对于需要滚动的 */
.wrapper {
  position: fixed;
  left: 0;
  top: 80px;
  bottom: 0;
  width: 100%;

  overflow: hidden;
}
</style>

代码语言：javascript复制

   // better-scroll开始
    // 初始化better-scroll得到scroll对象时必须保证DOM结构渲染完毕，
    this.$nextTick(() => {
      this.myScroll = new BScroll(this.$refs.wrapper, {
        scrollY: true,
        pullDownRefresh: {
          threshold: 50,
          probeType: 3
        },
        pullUpLoad: {
          threshold: 744
        }
      });

      this.myScroll.on("pullingDown", pos => {
        console.log("下拉刷新！", pos);
        this.$nextTick(() => {
          this.myScroll.refresh(); // DOM 结构发生变化后，重新初始化BScroll
        });
        this.myScroll.finishPullDown(); // 下拉刷新动作完成后调用此方法告诉BScroll完成一次下拉动作
      });

      this.myScroll.on("pullingUp", pos => {
        console.log("上拉刷新！", pos);
        this.$nextTick(() => {
          this.myScroll.refresh(); // DOM 结构发生变化后，重新初始化BScroll
        });
        this.myScroll.finishPullUp(); // 上拉加载动作完成后调用此方法告诉BScroll完成一次上拉动作
      });
    });
    // better-scroll  完毕

scroll

0 人点赞