# 6.2 下拉刷新

<template>
  <div class="dof-demo">
    <dof-minibar
      title="下拉刷新"
      background-color="#ffffff"
      :isImage="true"
      :left-button="leftButton"
      @dofMinibarLeftButtonClicked="back"
      @dofMinibarRightButtonClicked="minibarRightButtonClick"
    ></dof-minibar>
    <scroller class="scroller">
      <refresh
        class="refresh"
        @refresh="onrefresh"
        @pullingdown="onpullingdown"
        :display="refreshing ? 'show' : 'hide'"
      >
        <!-- <text class="indicator-text">refresh text...</text> -->
        <midea-apng-view :loop="true" :auto="true" :src="loadingIcon" class="indicator"></midea-apng-view>
      </refresh>
      <div class="cell" v-for="num in lists" :key="num">
        <div class="panel">
          <text class="text">{{ num }}</text>
        </div>
      </div>
    </scroller>
  </div>
</template>

<style scoped>
.dof-demo {
  background-color: #f9f9f9;
}
.refresh {
  width: 750;
  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: 42px;
  text-align: center;
}
.indicator {
  margin-top: 16px;
  height: 40px;
  width: 40px;
  color: blue;
}
.panel {
  width: 686px;
  height: 344px;
  margin-left: 32px;
  margin-top: 35px;
  margin-bottom: 35px;
  flex-direction: column;
  justify-content: center;
  border-radius: 32px;
  background-color: #ffffff;
}
.text {
  font-size: 50px;
  text-align: center;
  color: #41b883;
}
</style>
<script>
import { DofMinibar } from 'dolphin-weex-ui'
const modal = weex.requireModule('modal')
export default {
  components: { DofMinibar },
  data: () => ({
    refreshing: false,
    refreshingFlag: false,
    lists: [1, 2, 3, 4, 5],
    loadingIcon: 'http://dolphin-weex-dev.msmartlife.cn/cdn/images/common/loading_gray.png',
    startColor: '#29C3FF'
  }),
  created() {},
  computed: {},
  mounted() {},
  methods: {
    onrefresh() {
      modal.toast({ message: 'Refreshing...' })
      this.refreshing = true
      setTimeout(() => {
        this.refreshing = false
        modal.toast({ message: 'refresh end' })
      }, 2000)
    }
  }
}
</script>