refresh-header（1090+）

概述

refresh2下拉刷新顶部容器。

使用限制

子组件

支持。

属性

除了支持 通用属性 以外，还支持如下属性。

样式

支持 通用样式 。

事件

除了支持 通用事件 以外，还支持如下事件。

示例代码

<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>

版本更新说明