sns-scroll

本组件扩展自better-scroll，需要安装better-scroll依赖

better-scroll的文档连接 https://ustbhuangyi.github.io/better-scroll/#/

组件可以传递的参数如下：

背景色: :backgroundColor="#fff000"或者不传，默认:#F5F5F5

距离顶部高度: top="100px"，默认为：0

距离底部高度: bottom="40px"，默认为：0

是否启用弹性模式： :bounce="true"，默认为：false

是否显示滚动条： :scrollbar="true"，默认为：false

要启用下拉刷新的功能，请传递配置对象： :pullDownRefresh="{threshold: 40, stop: 40, text: '刷新成功'}"

其中threshold代表回弹的位置,stop代表停止的位置，如果不想启用，可以不传

要启用上拉加载的功能，请传递配置对象： :pullUpLoad="{threshold: 0, text: { more: '上拉加载更多', noMore: '我是有底线的' } }"

组件可以调用的API如下：

销毁滚动组件: this.$refs.scroll && this.$refs.scroll.destroy();

禁用滚动组件：this.$refs.scroll && this.$refs.scroll.disable();

启用滚动组件：this.$refs.scroll && this.$refs.scroll.enable();

启用上拉加载功能：this.$refs.scroll && this.$refs.scroll.enablePullUp();

禁用上拉加载功能: this.$refs.scroll && this.$refs.scroll.disablePullUp();

刷新滚动组件，防止在滚动组件中动态添加内容后，滚动组件的高度没有重置.

不过组价内部已经设置了内容高度监听，会自动刷新出高度，不用过度担心，不过还用要说一下调用方法:

this.$refs.scroll && this.$refs.scroll.refresh();

让滚动组件滚动到某个位置: this.$refs.scroll && this.$refs.scroll.scrollTo(offsetX,offsetY,time);

一般来说垂直的滚动组件是要设置 offsetX = 0; offsetY为你需要的高度; time为滚动事件

滚动到某个元素位置: this.$refs.scroll && this.$refs.scroll.scrollToElement(el, time, offsetX, offsetY);

组件下拉刷新和上拉加载使用方式如下：

<template>
    <div id="app" class="app-container">
        <app-scroller
            ref="scroll"
            :bounce="true"
            :scrollbar="true"
            :pullDownRefresh="pullDownRefresh"
            :pullUpLoad="pullUpLoad"
            @on-pulling-down="afterPullDown"
            @on-pulling-up="afterPullUp">
            <div>
                <div v-for="(item,index) in listNum" :key="index">
                    滚动组件里面的内容
                </div>
            </div>
        </app-scroller>
    </div>
</template>

<script>
import AppScroller from "@/components/common/AppScroller"
export default {
    data() {
        return {
            pullDownRefresh: {
                threshold: 40,
                stop: 40,
                text: '刷新成功'
            },
            pullUpLoad: {
                threshold: 0,
                text: {
                    more: '上拉加载更多',
                    noMore: '我是有底线的'
                }
            },
            listNum: 30
        }
    },
    methods: {
        //下拉刷新，手指touch结束的时候触发的事件
        afterPullDown() {
            this.listNum = 30;
            //完成下拉刷新
            this.$refs.scroll && this.$refs.scroll.forceUpdate();
        },
        //上拉加载，手指touch结束时触发的事件
        afterPullUp() {
            this.listNum = this.listNum + 30;
            //完成上拉加载
            this.$refs.scroll && this.$refs.scroll.forceUpdate();
            //禁用上拉加载
            this.$refs.scroll && this.$refs.scroll.disablePullUp();
        }
    },
    created() {

    },
    components: {
        AppScroller
    }
};
</script>

<style lang="less" scoped>
.app-container {
    height: 100%;
    position: relative;
    width: 100%;
}
</style>