<template>
  <div>
    <scroller ref="list">
      <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>
  </div>
</template>
<style scoped>
  .text{font-size: 50 px;}
  .refresh {
    width: 750 px;
    display: -ms-flex;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;
    align-items: center;
  }
  .indicator-text {
    color: #888888;
    font-size: 42 px;
    text-align: center;
  }
  .indicator {
    margin-top: 16 px;
    height: 40 px;
    width: 40 px;
    color: blue;
  }
</style>
<script>
    export default {data () {
            return {arr: [],
                refreshing:false
            }
        },
        created () {for (let i = 0; i < 30; i++) {this.arr.push (i + 1)
            }

        },
        methods: {onrefresh () {
                this.refreshing  = true;
                setTimeout (() => {this.refreshing = false;}, 1000)
            }
        }
    }

</script>