refresh2 (1090+)

Overview

Enhanced pull-to-refresh container.

The current functions of the refresh element are simple and not easy to extend. Therefore, refresh2 is added.

Application Scope

Subelements

Supported, including refresh-header and refresh-footer.

Attributes

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

Styles

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

Events

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

Methods

Sample Code

<template>
  <div class="root">
    <refresh2 id="refresh" offset="132px" animationduration="500" class="container" reboundable="false" type="auto" @refresh="refresh" @pulluprefresh="pullUpRefresh" @pulldownrefresh="pullDownRefresh" gesture="true" enablepulldown="true" enablepullup="true">
      <!-- content -->
      <div class="content-list">
        <list class="list" id="movie-list" @scrollbottom="loadMoreData">
          <list-item type="listItem" for="{{dataList}}" tid="$item.id">
            <text class="list_item">{{$item.title}}</text>
          </list-item>
        </list>
      </div>
    </refresh2>
  </div>
</template>
<style>
  .root {
    flex-direction: column;
    align-items: center;
  }
  .list_item {
    height: 150px;
    border-bottom: 1px solid #dddddd;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-left: 30px;
  }
  .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()
      }, 500);
    },
    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()
      }, 500);
    },
    refresh: function (e) {
      console.log("refresh:" + e.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