vue-scroller下拉刷新及无限加载组件学习之路

在做vue相关的H5时用的vue-scroller来进行的分页，由于是第一次接触vue这个东西当时左好多东西都是懵懂的，在踩过无数个坑之后终于现在觉得自己比以前好很多了。

1：本人用的vue-cli搭建的项目

2：用npm install vue-scroller --save下载对应的包

3：在入口文件import scroller from "vue-scroller" 接下来就是vue.use(scroller);

4:直接在组件中运用scroller插件

<template>
    <scroller delegate-id="myScroller" :on-refresh="refresh" :on-infinite="loadMore"
    v-ref:my_scroller>
        <div v-for="(index, item) in items" @click="onItemClick(index, item)"
        class="row" :class="{'grey-bg': index % 2 == 0}">
            {{ item }}
        </div>
    </scroller>
</template>
<script>
    import Scroller from 'vue-scroller'export
default {
        components:
        {
            Scroller
        },
        data() {
            return {
                items: []
            }
        },
        ready() {
            for (let i = 1; i <= 20; i++) {
                this.items.push(i + ' - keep walking, be 2 with you.')
            }
            this.top = 1 this.bottom = 20 setTimeout(() = >{
                /* 下面2种方式都可以调用 resize 方法 */
                // 1. use scroller accessor
                $scroller.get('myScroller').resize()
                // 2. use component ref
                // this.$refs.my_scroller.resize()
            })
        },
        methods: {
            refresh() {
                setTimeout(() = >{
                    let start = this.top - 1
                    for (let i = start; i > start - 10; i--) {
                        this.items.splice(0, 0, i + ' - keep walking, be 2 with you.')
                    }
                    this.top = this.top - 10;
                    /* 下面3种方式都可以调用 finishPullToRefresh 方法 */
                    // this.$broadcast('$finishPullToRefresh')
                    $scroller.get('myScroller').finishPullToRefresh()
                    // this.$refs.my_scroller.finishPullToRefresh()
                },
                1500)
            },
            loadMore() {
                setTimeout(() = >{
                    let start = this.bottom + 1
                    for (let i = start; i < start + 10; i++) {
                        this.items.push(i + ' - keep walking, be 2 with you.')
                    }
                    this.bottom = this.bottom + 10;
                    setTimeout(() = >{
                        $scroller.get('myScroller').resize()
                    })
                },
                1500)
            },
            onItemClick(index, item) {
                console.log(index)
            }
        }
    }
</script>

　　接下来要说的是scroller提供的一些方法：

• resize :Void
• triggerPullToRefresh :Void
• Void finishPullToRefresh :Void
• scrollTo(x:Integer, y:Integer, animate:Boolean) :Void
• scrollBy(x:Integer, y:Integer, animate:Boolean) :Void
• getPosition :Object

 

 

 

 

 

 

 

 

Vue.use(VueScroller)