refresh2（1090+）

概述

下拉刷新增强容器。

目前已有refresh组件仅提供简单功能，不能扩展，所以现新增refresh2组件。

使用限制

子组件

支持<refresh-header>和<refresh-footer>等子组件。

属性

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

样式

除了支持 通用样式 以外，还支持如下样式。

事件

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

方法

示例代码

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

版本更新说明