# vue-pull-refresh

**Repository Path**: woyaoqu/vue-pull-refresh

## Basic Information

- **Project Name**: vue-pull-refresh
- **Description**: 基于vue2.x.x的上拉加载更多和下拉刷新组件
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 2
- **Forks**: 1
- **Created**: 2017-05-03
- **Last Updated**: 2021-11-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 嗯 你可能认为我会说些什么 

### 框架 
这个模板是使用vue-cli这个脚手架初始化的项目，你可以自己尝试下。因为我用的是scss，所以安装完成之后还需要装sass-loader，有些时候node-sass又因为什么什么的给什么什么了，所以也需要装下，嗯，差不多就是这样。

Vue2.2.6  你想要的东西可能在根目录的package.json里面。

### 他是做什么的 
哇哈哈哈，咳咳，他是一个上拉加载更多和下拉刷新的组件，因为刚性的需求，我不得不做，所以做好了分享下，并且欢迎大家给建议，毕竟老夫还是个柴鸡。

### 怎么用？
一脸懵逼

你想剔出来用？

核心文件

>src/components/pull_refresh.vue

>src/style/pull_refresh.scss

1、在公共入口处或者局部使用都行

>import vRefresh from './components/pull_refresh.vue'

>Vue.component('v-refresh',vRefresh);

2、你来看下就是了

    <template>
        <div>
            <v-refresh 
            :on-class = "'model-scroll'"
            :on-mode = "0"
            :on-more = "success"  
            :on-tip = "tip"
            :on-tip-show = "true"
            :on-infinite = "infinite"
            :on-refresh = "refresh" >
                <ul class="model-list">
                    <li v-for="(i,index) in item">
                        <span>{{i}}</span>
                    </li>
                </ul>
            </v-refresh>
        </div>
    </template>

    <script type="text/javascript">
        export default{
            data(){
                return{
                    item: 7,
                    success: true,
                    tip: '主人看我,看我干嘛'
                }
            },
            methods:{
                infinite : function(){
                    var _V = this;
                    /*  这里是模拟ajax或者什么其他的请求数据延迟的情况，
                    *   所以我随便延迟了1秒，不然加载成功很快，过渡的
                    *   文字提示可能看都看不到
                    */
                    setTimeout(()=>{
                        _V.item += 1;
                        _V.success = false;
                    },1000);
                },
                refresh : function(){
                    var _V = this;
                    /*  这里是模拟ajax或者什么其他的请求数据延迟的情况，
                    *   所以我随便延迟了1秒，不然加载成功很快，过渡的
                    *   文字提示可能看都看不到
                    */
                    setTimeout(()=>{
                        _V.item += 1;
                        _V.success = false;
                    },1000);
                }
            }
        }
    </script>

so cool

### 参数详解
>onClass

    类型：String
    默认值：'',
    是否必传：false

    作用：为scroll-box增加自定义样式名，
    注：如果需要监听内容更改onContentChange并定位到顶部需要传递onClass参数，
    如果你没有这个需求，那你管他干嘛呢

>onTipShow

    类型：Boolean
    默认值：true,
    是否必传：false

    作用：控制上拉加载更多和下拉刷新的文字提示是否显示

>onTip

    类型：String
    默认值：'加载成功',
    是否必传：false

    作用：控制加载成功或者失败的提示语，你想怎么蹂躏他呢？

>onMore

    类型：Boolean
    默认值：false,
    是否必传：true

    作用：决定本次上拉或者下拉是否状态是否完成，我才不管你请求成功与否

>onContentChange

    类型：Boolean
    默认值：false,
    是否必传：false

    作用：监听pull-content里面的内容是否更改，
    注：如果需要监听内容更改onContentChange并定位到顶部需要传递onClass参数，
    如果你没有这个需求，那你管他干嘛呢

>onMode

    类型：Number
    默认值：0,
    是否必传：false

    作用：加载模式
            0: 上拉加载和下拉刷新都会监听;
            1: 仅仅监听下拉刷新;
            2: 仅仅监听上拉加载更多;
            3: 老子不管了，什么都不做，就只有滑动怎么了

>onInfinite

    类型：Function
    默认值：function(){},
    是否必传：false

    作用：上拉加载更多执行的函数，你也看到我有默认值了

>onRefresh

    类型：Function
    默认值：function(){},
    是否必传：false

    作用：下拉刷新执行的函数，你也看到我兄弟有默认值了


### 你认为我玩了？

是的，没错，完了，如果你发现了bug，那么很不幸，快点和我说，我把它修复了你就当没有发生过，如果没有发现bug而且你觉得对你有些用，来吧，给我些鼓励，star一下吧（我才不管，你不给我star，今天你跑不掉）。

### END