better-scroll 实现下拉刷新、上拉加载的那些坑

**下载better-scroll**
`npm i better-scroll --save `
pulldown,监听下拉动作,可以实现下拉刷新;
  • pullup,监听上拉动作,可以实现上拉加载;
  • scrollbar,自定义滚动条;
  • slide,用于实现轮播图效果;
  • wheel,是实现类似 IOS picker 的基石,可以实现城市联动选择器;
  • zoom,实现缩放效果;
  • mouse-wheel,鼠标滚轮操作,可以用来操作列表内容滚动、轮播图的切+ 换等;
  • observe-dom,开启对scroll区域dom改变的监听;当dom改变时,触发对应的函数;
  • infinity,实现无限滚动,有大量的列表数据需要渲染时使用,它可以实现部分渲染;
  • nested-scroll,实现双层嵌套的滚动效果;
  • better-scroll,包含以上的所有插件

下拉刷新 上拉加载

使用better-scroll 实现下拉刷新、上拉加载时要注意以下几点:

  • wrapper里必须只有一个子元素;
  • 子元素的高度要比wrapper要高;
  • 使用的时候,要确定DOM元素是否已经生成,必须要等到DOM渲染完成后,再new BScroll();
  • 滚动区域的DOM元素结构有变化后,需要执行刷新 refresh() ;
  • 上拉或者下拉,结束后,需要执行finishPullUp()或者finishPullDown(),否则将不会执行下次操作;
  • better-scroll,默认会阻止浏览器的原生click事件,如果滚动内容区要添加点击事件,需要在实例化属性里设置click:true;
<template>
  <div>
    <div class="box"></div>
    <!-- ........... -->
    <div class="wrapper left" ref="wrapper">
      <div class="bscroll-container">
        <!-- 刷新提示信息 -->
        <div class="top-tip">
          <span class="refresh-hook">{{ pulldownMsg }}</span>
        </div>
        <!-- 内容列表..........-->

        <ul class="content">
          <li v-for="item in data" :key="item" id="aaa">{{ item }}</li>
        </ul>

        <!-- 底部提示信息........... -->
        <div class="bottom-tip">
          <span class="loading-hook">{{ pullupMsg }}</span>
        </div>
      </div>
    </div>
    <!-- ............ -->
  </div>
</template>

<script>
import BScroll from 'better-scroll';
// let count = 1;
export default {
  name: 'Z',
  data() {
    return {
      data: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20],
      pulldownMsg: '下拉刷新 ',
      pullupMsg: '加载更多 ',
    };
  },
  mounted() {
    this.init()
  },
  methods:{
     init(){
        const that = this;
    // 创建Better-Scroll对象
    this.scroll = new BScroll(this.$refs.wrapper, {
      probeType: 1, //滚动的时候会派发scroll事件,会节流
      click: true, //派发click事件
      // 开始滑轮
      mouseWheel: true,
      // 开启下拉刷新
      pullDownRefresh: {
        threshold: 50,
        stop: -10,
      },
      // 下拉加载
      pullUpLoad: {
        threshold: 50,
      },
    });
    //监听下拉刷新
    // 当下拉的时候向后端发送请求
    this.scroll.on('pullingDown', () => {
      console.log('我是下拉刷新');
      this.scroll.finishPullDown();
    });
    // 监听上拉加载
    // 当上拉的时候向后端发送请求
    this.scroll.on('pullingUp', () => {
      console.log('我是上拉加载');
      // 当上拉加载数据加载完毕后,需要调用此方法告诉 better-scroll 数据已加载。
      // 不然就会执行一次
      this.scroll.finishPullUp();
    });
    // //滑动结束松开事件
    this.scroll.on('touchEnd', pos => {
      //上拉刷新
      // console.log('我是posy', pos);
      if (pos.y > 200) {
        setTimeout(() => {
          this.pulldownMsg = ' ';
          this.scroll.refresh(); //重新计算高度
        }, 2000);
      } else if (pos.y < this.scroll.maxScrollY - 200) {
        this.pullupMsg = ' ';
      }
    });
  }
  }
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 40px;
  background: #000;
}
.wrapper {
  width: 20%;
  height: 500px;
  background: rgb(245, 247, 249);
  overflow: hidden;
  position: relative;
}
#aaa {
  width: 100%;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
/* 下拉、上拉提示信息 */
.top-tip {
  position: absolute;
  top: -40px;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #555;
}
.bottom-tip {
  width: 100%;
  height: 35px;
  line-height: 35px;
  text-align: center;
  color: #777;
  position: absolute;
  bottom: -35px;
  left: 0;
}
</style>

上一篇:Better Directory Listing with NGINX's Fancy Index Module


下一篇:Flutter常用组件和属性总结