<template>
    <scroller ref="list" :style="page_style">
        <refresh class="refresh" @refresh="onrefresh" :display="refreshing ?'show':'hide'">
            <text class="indicator-text">正在刷新 ...</text>
            <loading-indicator class="indicator"></loading-indicator>
        </refresh>
        <text v-for="(num, index) in arr" class="text">这是第 {{num}} 条数据</text>
    </scroller>
</template>
<style scoped>
    .text {
        font-size: 50px;
    }

    .refresh{
        width: 750px;
        position: absolute;
        height: 120px;
        top: 0;
        align-items: center;
    }

    .indicator-text {
        color: #888888;
        font-size: 42px;
        text-align: center;
    }

    .indicator {
        margin-top: 16px;
        height: 40px;
        width: 40px;
        color: blue;
    }
</style>
<script>
    export default {
        data() {
            return {
                arr: [],
                refreshing: false
            }
        },
        created() {
            this.getData();
        },
        computed:{
            page_style:function(){
                var statusBarHeight = weex.config.eros.statusBarHeight ? weex.config.eros.statusBarHeight : 40;
                return {paddingTop: statusBarHeight};
            },
            new_style:function () {
              /*  var statusBarHeight = weex.config.eros.statusBarHeight ? weex.config.eros.statusBarHeight : 40;
                if(this.refreshing){
                    return {
                        width:"750ox",
                        position:"fixed",
                        top:0
                    }
                }else {
                    return {
                        position:"fixed",
                        top:"-2000px"
                    }
                }*/
                /*return {
                    width:"750px",
                    height:"100px",
                    position:"relative",
                    top:"-2000px"
                }*/
            }
        },
        methods: {
            getData(){
                this.arr = [];
                var random = Math.random();
                for (let i = 0; i < 30; i++) {
                    this.arr.push(random + i + 1)
                }
            },
            onrefresh() {
                this.refreshing = true;
                setTimeout(() => {
                    this.getData();
                    this.refreshing = false;
                }, 1000)
            }
        }
    }
</script>