<template>
    <div class="wrapper" ref="wrapper">
        <ul class="contents">
          <li v-for="(item,index) in data">{{item.word[index]}}
          </li>
        </ul>
        <div class="loading-wrapper"></div>
     </div>
</template>

<script type="text/ecmascript-6">
    import Mock from 'mockjs';
    import BScroll from 'better-scroll';
    import axios from 'axios';
    export default {
        data:function () {
            data: [],
        },
        mounted:function(){
            this.initScroll();
        },
        methods: {
            initScroll:function () {
                let that = this;
                axios.post('/lists').then((res) => {
                    this.data = res.data.result;
                    this.$nextTick(() => {
                        if (!this.WScroll) {
                            this.WScroll = new BScroll(this.$refs.wrapper,{
                                click:true,
                                scrollY:true,
                                pullUpLoad:{
                                    threshold:-70
                                }
                            })
                            this.WScroll.on("pullingUp",function () {
                                that.loadData();
                                that.$nextTick(function () {
                                     that.WScroll.finishPullUp();
                                     that.WScroll.refresh();
                                })
                            })
                        }
                    })
                })
            },
            loadData:function () {
            //給頁面添加數(shù)據(jù)的函數(shù)
                let that = this;
                for (let i = 1 ;i <5 ; i++) {
                    that.data.push(Mock.mock({
                        "id":i,
                        "word":["美食","貓眼電影","酒店","休閑娛樂","外賣"]
                    }))
                }
            }
        }
    }
</script>

<style>
    .wrapper {
        width: 100%;
        -webkit-flex: 1;
        overflow-y: scroll;
    }

    .contents li {
        line-height: .7rem;
        border-bottom: .01rem solid #ccc;
    }
</style>