vue爬坑之vux-scroller实现上拉加载下拉刷新

虽然vux官方已经说明scroller不再维护，但是基本上能满足我们的使用场景。

1.我装了mock.js来模拟加载数据，所以没有装mock的同学可以先装一下mock很方便的数据模拟工具:http://mockjs.com/

2.我装了stylus 语法相当自由，同僚们可以装一下，记得装stylus-loader;

3.这个组件是居于vux的，没有用vux框架的可以去了解一下

集成了一下代码，话不多说接下来我就直接贴代码了：

<template>
    <div>
        <scroller class="scroller" use-pullup :pullup-config="pullupDefaultConfig" @on-pullup-loading="loadMore"
                    use-pulldown :pulldown-config="pulldownDefaultConfig" @on-pulldown-loading="refresh"
                    lock-x ref="scrollerBottom" height="-48" v-model="scrollerStatus" >
            <div class="scroll-content">
                <div class="per-content"  v-for="(item, index) in loadList">
                    <div>测试图片：{{item.id}}</div>
                    <img :src="item.img" alt="">
                </div>
            </div>

        </scroller>
    </div>
</template>

<script type="text/ecmascript-6">
    import { Scroller } from 'vux'
    const pulldownDefaultConfig = {
        content: '下拉刷新',
        height: 40,
        autoRefresh: true,
        downContent: '下拉刷新',
        upContent: '释放后刷新',
        loadingContent: '正在刷新...',
        clsPrefix: 'xs-plugin-pulldown-'
    };
    const pullupDefaultConfig = {
        content: '上拉加载更多',
        pullUpHeight: 60,
        height: 40,
        autoRefresh: true,
        downContent: '释放后加载',
        upContent: '上拉加载更多',
        loadingContent: '加载中...',
        clsPrefix: 'xs-plugin-pullup-'
    };
    export default {
        components: {
            Scroller
        },
        mounted() {
//            this.$refs.scrollerBottom.reset()
            this.$nextTick(() => {
                this.$refs.scrollerBottom.reset()//{top: 0}
            })
            let firstLoad = this.$mock.mock({
                // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
                'list|10': [{
                    // 属性 id 是一个自增数，起始值为 1，每次增 1
                    'id|+1': 1,
                    'img':this.$mock.Random.image('720x300')+'.png'
                }]
            });
            this.loadList=firstLoad.list
            console.log('第一次加载', this.loadList)
        },
        name: 'HelloWorld',
        data() {
            return {
                loadList:[] ,
                pullupDefaultConfig: pullupDefaultConfig,
                pulldownDefaultConfig: pulldownDefaultConfig
            }
        },

        methods: {
            refresh() {


            },
            loadMore() {
                //mock数据
                let loadMoreData= this.$mock.mock({
                    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
                    'list|5': [{
                        // 属性 id 是一个自增数，起始值为 1，每次增 1
                        'id|+1': 1,
                        'img':this.$mock.Random.image('720x300')+'.png'
                    }]
                });
                console.log('more',loadMoreData.list)
                console.log('concat前', this.loadList.length)
                this.loadList=this.loadList.concat(loadMoreData.list);
                console.log('concat后', this.loadList.length)
                console.log('加载更多后拼接', this.loadList)
                this.$refs.scrollerBottom.reset()
                this.scrollerStatus.pullupStatus = 'default'
            }
        },


    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .scroller{
        /*overflow scroll!important*/
        /*-webkit-user-drag overflow !important*/
    }
    .scroll-content
        height 100%
        overflow scroll!important
    .per-content
        padding 10px
        img
            width: 100%

</style>