better-scroll

背景与优势

1、是D8黄轶老师基于iscroll重写的插件，重点解决移动端（已支持 PC）各种滚动场景需求的插件。可以很好的和 Vue 配合使用。
2、滚动流畅，且没有滚动条。

文档地址

官网http://ustbhuangyi.github.io/better-scroll/doc/

安装

npm install better-scroll --save

引入

import BScroll from 'better-scroll'

简单例子

<div class="wrapper">
  <!-- better-scroll 只处理容器（wrapper）的第一个子元素（content）的滚动，其它的元素都会被忽略。-->
  <ul class="content">
    <li>...</li>
    <li>...</li>
    ...
  </ul>
  <!-- 这里可以放一些其它的 DOM，但不会影响滚动 -->
</div>

初始化

let scroll = new BScroll('.wrapper', {
    scrollY: true,
    click: true
})

可以滚动的前提：
1、content要比wrapper高
2、wrapper宽高值确定并且overflow: hidden

它有很多方法与属性去帮助我们实现我们工作中业务的各种使用场景

自已做的一个上拉加载和下拉刷新的demo

p1dgf-p9k5z.gif

<!-- better_Scroll-demo -->
<template>
  <div class="page_wraper" ref="wrap">
    <div class="content">
      <div class="top_tip tc">{{ pullDownMsg }}</div>
      <ul>
          <li v-for="i in list">{{ i }}</li>
      </ul>
      <div class="bottom_tip tc">{{ pullUpMsg }}</div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { setTimeout } from 'timers';
export default {
  data() {
    return {
      startNum: 1,
      list: [],
      pullDownMsg: "下拉刷新，发现更多",
      pullUpMsg: "加载中，请稍后...",
      noMsg: "没有更多了",
      bsScroll: ""
    };
  },

  components: {},

  computed: {},

  mounted: function() {
      this.getList().then((res) => {
        this.list = this.list.concat(res);
      });
      // 初始化
      this.bsScroll = new BScroll(this.$refs.wrap, {
          probeType: 1, 
          click: true
      })
      // 监听滚动事件
      this.bsScroll.on('scroll', (pos) => {
        if(pos.y > 0 && pos.y <= 40) {
          this.pullDownMsg = '下拉刷新，发现更多';
        }else if(pos.y > 40) {
          this.pullDownMsg = "释放更新，发现更多"
        }
      })
      // 监听滚动结束
      this.bsScroll.on('touchEnd', (pos) => {
        if(pos.y > 40) {
          // 重新获取数据
          this.startNum = this.getRandom(1, 100);
          setTimeout(() => {
            this.getList().then((res) => {
              this.list = res;
              this.pullDownMsg = '下拉刷新，发现更多';
            }) 
          }, 1000)
        }else if(pos.y < this.bsScroll.maxScrollY - 30) {
          // 下拉加载
          this.getList().then((res) => {
            this.list = this.list.concat(res);
            this.bsScroll.refresh();
          })
        }
      })
  },

  methods: {
    getList() {
      // 模拟数据请求
      return new Promise(resolve => {
        setTimeout(() => {
            let start = this.startNum, arr = [];
            for (
                this.startNum;
                this.startNum <= start + 18;
                this.startNum++
            ) {
                arr.push(this.startNum);
                resolve(arr);
            }
        }, 1000);
      });
    },
    getRandom(m, n) {
      return Math.floor(Math.random()*(m - n) + n);
    }
  }
};
</script>

<style lang='scss' scoped>
.page_wraper{
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #eee;
}
.content{
    position: relative;
    min-height: 100%;
}
.top_tip{
    position: absolute;
    top: -35px;
    left: 0;
    width: 100%;
}
.bottom_tip{
    position: absolute;
    bottom: -35px;
    left: 0;
    width: 100%;
}
ul li{
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #ccc;
    padding: 5px 20px;
}
</style>

每一个不曾起舞的日子，都是对生命的辜负