Scroll-VUE

这个是 hyhc-scroll 组件的VUE版本。

注意：本插件只能用在 .vue 文件中！

安装

cnpm install --save @hyhc/scroll-vue

使用

<template>
    <!-- 
        在模板中使用插件 
        需要绑定两个事件，用于响应下拉刷新与上拉加载
        content 属性也是必须的！
    -->
    <scroll :content="this" @refreshing="onRefresh" @nextPageLoading="onNextPage">
        <!-- 插件内容，通常用于放置一个列表 -->
    </scroll>
</template>

<script>
//在 .vue 文件的 script 标签内引入插件
import scroll from '@hyhc/scroll-vue';

//在组件内注册 scroll
module.exports = {
    data:function(){
        return {}
    },
    components: {
        'scroll': scroll
    },
    methods: {
        onRefresh: function(){
            //加载数据
            refresh().then(()=>{
                //触发事件，通知插件数据已加载完成，
                this.$emit('loadEnd');
            });
        },
        onNextPage: function(){
            loadData().then((result)=>{    
                //第二个参数表示是否为最后一页， 为 true 时将不能再加载下页数据            
                this.$emit('loadEnd', true);
            });
        }
    }
}
</script>

编译

本组件是以原代码的形式发布于 NPM 上的，所以在使用者在自己的项目中需要配合 Webpack 对本组件进行编译，这是非常重要的！

注意

本文档只写有关于插件在 VUE 框架中的使用说明，本插件是基于 @hyhc/scroll 进行的封装，所以还需要遵守 @hyhc/scroll 插件的一些规则，详情请跳转至该组件的页面查看。