refresh-header (1090+)

Overview

Pull-to-refresh header container of refresh2.

Application Scope

Subelements

Supported.

Attributes

In addition to general attributes, the attributes listed in the following table are supported.

Styles

Common styles are supported.

Events

In addition to common events, the events listed in the following table are supported.

Sample Code

<import name="movie-item" src="../Common/SR399/movie-item.ux"></import>
<template>
  <div class="root">
    <refresh2 id="refresh" style="background-color:{{backgroundColor}};progress-color:{{progressColor}};" offset="132px" animationduration="300" class="container" reboundable="true" type="auto" @refresh="refresh" @pulluprefresh="pullUpRefresh" @pulldownrefresh="pullDownRefresh" gesture="true" enablepulldown="true" enablepullup="true">
      <refresh-header class="header" spinnerstyle="behind" translationwithcontent="false" @move="headerMove" autorefresh="true">
        <progress class="circular" type="circular" style="color: #fff" />
      </refresh-header>
      <!-- content -->
      <div class="content-list">
        <list class="list" id="movie-list" @scrollbottom="loadMoreData">
          <list-item type="listItem" for="{{dataList}}" tid="$item.id">
            <movie-item item="{{$item}}"></movie-item>
          </list-item>
        </list>
      </div>
    </refresh2>
  </div>
</template>
<style>
  .root {
    align-items: center;
  }
  .list {
    padding-left: 16px;
    padding-right: 16px;
  }
  .content-list {
    background-color: #D0D0D0;
    flex-direction: column;
    align-items: center;
  }
  .container {
    height: 100%;
    width: 100%;
  }
  .header {
    height: 175%;
    width: 100%;
    background-color: #800000;
    justify-content: center;
    align-items: center;
  }
  .content {
    width: 100%;
    height: 100%;
    background-color: #ffffff;
  }
  .txt {
    width: 100%;
    height: 100px;
  }
  .circular {
    width: 100%;
    height: 75px;
  }
  .footer {
    height: 100px;
    width: 100%;
    background-color: #008000;
    justify-content: center;
    align-items: center;
  }
  .loading {
    color: #ffffff;
  }
</style>
<script>
import api from '../Common/SR399/service.js'
  const LOAD_MORE_INITIAL_INDEX = 1;
  const LOAD_MORE_INCREASE_THRESHOLD = 1;
  module.exports = {
    backgroundColor: "#ffffff",
    progressColor: "#ffffff",
    data: {
      dataList: [],
      currentTotalPages: Number.MAX_SAFE_INTEGER,
      currentPage: LOAD_MORE_INITIAL_INDEX,
    },
    computed: {
      loadMoreEnabled: {
        get() {
          return this.currentPage < this.currentTotalPages
        }
      },
    },
    onReady(options) {
      this.getData(LOAD_MORE_INITIAL_INDEX)
    },
    // Service calls
    loadMoreData: function () {
      if (this.loadMoreEnabled) {
        this.getData(this.currentPage + LOAD_MORE_INCREASE_THRESHOLD)
      }
    },
    clearData: function () {
      this.dataList = []
    },
    getData: function (page) {
      this.currentPage = page
      var app = this
      api.callGet({ page: page }, function (data) {
        if (page > LOAD_MORE_INCREASE_THRESHOLD) {
          data.results.forEach(movie => {
            app.dataList.push(movie)
          });
        } else {
          app.dataList = data.results
        }
        app.currentTotalPages = data.total_pages
      })
    },
    pullDownRefresh: function () {
      console.log("pullDownRefresh");
      console.log("pulldownrefreshing:" + this.$element('refresh').pulldownrefreshing)
      console.log("pulluprefreshing:" + this.$element('refresh').pulluprefreshing)
      this.$element('refresh').startPullDownRefresh()
      setTimeout(() => {
        this.clearData()
        this.getData(LOAD_MORE_INITIAL_INDEX)
        this.finishPullDownRefresh()
      }, 1500);
    },
    pullUpRefresh: function () {
      console.log("pullUpRefresh");
      console.log("pulldownrefreshing:" + this.$element('refresh').pulldownrefreshing)
      console.log("pulluprefreshing:" + this.$element('refresh').pulluprefreshing)
      this.$element('refresh').startPullUpRefresh();
      setTimeout(() => {
        this.finishPullUpRefresh()
      }, 1500);
    },
    refresh: function (e) {
      console.log("refresh:" + e.refreshing);
    },
    headerMove: function (params) {
      console.log("headermove - scrollY:" + params.scrollY + " percent:" + params.percent + " isDrag:" + params.isDrag + " refreshing:" + params.refreshing);
    },
    footerMove: function (params) {
      console.log("footermove - scrollY:" + params.scrollY + " percent:" + params.percent + " isDrag:" + params.isDrag + " refreshing:" + params.refreshing)
    },
    finishPullDownRefresh: function () {
      console.log("finishPullDownRefresh")
      this.$element('refresh').stopPullDownRefresh()
    },
    finishPullUpRefresh: function () {
      console.log("finishPullUpRefresh")
      this.$element('refresh').stopPullUpRefresh()
    },
  }
</script>

Version Change History