vue使用better-scroll

[Wscats]

安装

具体可以看官方文档

npm install better-scroll --save
//接下来就可以在代码中引入了，webpack等构建工具都支持从node_modules里引入代码：
import BScroll from 'better-scroll'

在vue框架中使用的具体介绍，可以参考作者这篇文章当 better-scroll 遇见 Vue

引入

HTML部分，以下是很多Vue项目经典的写法

<template>
    <div id="wrapper" ref="list">
      <div id="scroller">
        <XhomeCard :key="index" v-for="(n,index) in news" :content="n" />
      </div>
    </div>
</template>

JS部分，异步数据的处理注意加载的时机，要在数据完全并且得到并且渲染之后，才能开始挂载逻辑，这里的this.$nextTick是一个异步函数，为了确保DOM已经渲染

import BScroll from "better-scroll";
export default {
    methods: {
        // 加载数据
        loadMore() {
            this.$axios
                .get("/api/container/getIndex", {
                    params: {}
                })
                .then(response => {
                    this.$nextTick(() => {
                        if (!this.scroll) {
                            this.scroll = new BScroll(this.$refs.list, {
                                click: true,
                                scrollY: true,
                                pullUpLoad: {
                                    threshold: -30 // 当上拉距离超过30px时触发 pullingUp 事件
                                }
                            });
                            this.scroll.on("pullingUp", () => {
                                // 上拉刷新
                                // 做些事情
                                this.scroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
                            });
                            this.scroll.on("scrollEnd", () => {
                                // 滚动到底部
                                if (this.scroll.y <= this.scroll.maxScrollY) {
                                    this.loadMore();
                                }
                            });
                        } else {
                            // 这里触发this.scroll刷新，不然如果异步数据更新的话，this.scroll不刷新会置顶回去
                            this.scroll.refresh();
                        }
                    });
                })
                .catch(error => {
                    console.log(error);
                });
        }
    }
}

css部分其实很关键，缺少了也不可以，当然我貌似发现官方文档里面没有写出来，这部分参考的是iscroll的样式

<style scoped>
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  -ms-touch-action: none;
}

body,
ul,
li {
  padding: 0;
  margin: 0;
  border: 0;
}

body {
  font-size: 12px;
  font-family: ubuntu, helvetica, arial;
  overflow: hidden;
  /* this is important to prevent the whole page to bounce */
}

/* 正常情况只要wrapper和scroller类就可以了 */
#wrapper {
  position: absolute;
  z-index: 1;
  top: 84px;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #ccc;
  overflow: hidden;
}

#scroller {
  position: absolute;
  z-index: 1;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  width: 100%;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
  -o-text-size-adjust: none;
  text-size-adjust: none;
}
</style>

上拉刷新

利用实例化后的this.scroll可以获取滚动的高度，和列表的高度，然后根据指导的顶部导航栏高度来计算出到底的临界点

this.scroll.on("scrollEnd", () => {
    // 滚动到底部
    if (this.scroll.y <= this.scroll.maxScrollY + 50) {}
});

不计算头部

this.scroll.on("scrollEnd", () => {
    // 滚动到底部
    if (this.scroll.y <= this.scroll.maxScrollY) {
        this.loadMore();
    }
})

或者使用

this.scroll.on("pullingUp", () => {
    console.log("上拉刷新");
    // 做些事情
    this.scroll.finishPullUp(); // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
});

还有最好做严谨判断，比如路由切换，组件销毁要判断this.$scroll是否存在，没有则重新实例化

this.$nextTick(() => {
    if (!this.scroll) {
        this.scroll = new BScroll(this.$refs.list, {})
    }else{
        this.scroll.refresh();
    }
})

数据更新，可以触发refresh

destoryed() {
    this.scroll.refresh();
    this.scroll = null;
}

下拉刷新

判断出现下拉刷新是否超出距离，然后触发更新数据，数据加载(concat)数组头部

this.scroll.on("touchEnd", pos => {
    // 下拉动作
    if (pos.y > 32) {
        this.loadMore("down");
    }
});