vue-scroller上拉加载更多，下拉刷新插件（综合百家之谈）

今天做了一个项目，想更完美一点所以增加了一个下拉刷新的方法那就是vue-scroller插件，下面直接上代码介绍一下具体的使用方法：

首先我们需要安装一下这个方法：

npm i vue-scroller -S

安装完成，随即在main.js导入并注册在Vue上

// 引入下拉刷新
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)

接下来就是放在代码中使用

<template>
<div>
  <scroller class="sroll"
       :on-refresh="refresh"
       :on-infinite="infinite"
       refresh-layer-color="#FBD391"
       loading-layer-color="#FBD391"
       refreshText="refresh"
       noDataText="no data"
       ref="myScroller">
         <ul>
            <li>{{item}}</li>
        </ul>  
    </scroller>
</div>
</template>
<script>
    export default{
        data(){
            return{
            }
        },
        methods:{

            // 下拉刷新
        refresh(){
             //要刷新的数据请求

            //关闭loading
            this.timeout = setTimeout(()=>{
　　　　　　　    this.$refs.myScroller.finishPullToRefresh()
　　　　　　}, 2000)
        },
        infinite(){
            console.log('上拉加载');
            this.$refs.myScroller.finishInfinite(true)
        }


        }
    }
</script>
<style lang="less" scoped>
    //设置scroller距离顶部的距离，移动端开发顶部会有个head组件（我移动端适配采用vw，所以直接输入px单位）
    .sroll{
        top: 176px;
    }
    //解决底部出现大量空白，以及列表项显示不全的问题
    ._v-container > ._v-content > .pull-to-refresh-layer {
        width:100%;
        height:120px;
        margin-top:-120px;
        text-align:center;
        font-size:32px;
        color:#AAA;
        float:left;
        top:0;
        left:0;
    }
</style>

下面介绍一下scroller的属性以及方法使用：

Attr. Name	Description	Required	Default Value
onRefresh	下拉刷新	N	事件
onInfinite	上拉加载	N	事件
refreshText	下刷新的提示信息	N	下拉刷新
noDataText	全部数据加载完的提示		没有更多数据
width	scroller container width	N	100%
height	scroller container height	N	100%
snapping	snapping width	N	100 (stand for 100px)
snappingHeight	snapping height	N	100
refresh-layer-color	下拉刷新的loading颜色	N	#666666
loading-layer-color	下拉加载的loading颜色	N	#666666
minContentHeight	min content height (px) of scroll-content	N	0

Scroller vm instance methods:

 

目前先总结这么多，欢迎小伙伴们留言评论。。。。

 

1. resize() resize scroller content (已经废弃)
2. triggerPullToRefresh() 触发下拉刷新
3. finishPullToRefresh() 完成下拉刷新.可以手动调用
4. finishInfinite(isNoMoreData :Boolean) 当参数为false时，上拉获取数据可以重新调用。当参数为true，上拉获取数据回调函数停止使用,下拉下部不再显示loading，会显示‘’暂无更多数据
5. scrollTo(x:Integer, y:Integer, animate:Boolean) scroll to a position in scroller content
6. scrollBy(x:Integer, y:Integer, animate:Boolean) scroll by a position in scroller content
7. getPosition :Object get current position of scroller content