refresh-view

支持下拉刷新、上拉加载的滚动容器。

属性

示例

<template>
<refresh-view enablePullUpLoad="{{true}}"
              pullingDown="{{pullingDown}}"
              pullingUp="{{pullingUp}}"
              c-bind:onPullDownRefresh="pullDownRefreshHandle"
              c-bind:onPullUpLoad="pullUploadHandle">
    <view class="content">
      <c-header title="refresh-view"></c-header>
      <text c-for="{{texts}}" class="text-item">{{item}}</text>
    </view>
    <text class="loading-text">{{loadingText}}</text>
</refresh-view>
</template>

<script>
import cml from 'chameleon-api';
class Refresh_view   {

  data = {
    imgGif: require('../../../components/refresh-loading/img/loading.gif'),
    texts: [0,1,2,3,4,5,6],
    pullingDown: false,
    pullingUp: false,
    loadingText: '上拉加载'
  }

  computed = {
  }

  watch  = {
  }

  methods = {
    pullDownRefreshHandle(e) {
      this.pullingDown = true;
      setTimeout(() => {
        let length = this.texts.length;
        for (let i = length; i < length + 5; i ++) {
          this.texts.unshift(i);
        }
        this.pullingDown = false;
      }, 2000);
    },
    pullUploadHandle(e) {
      this.pullingUp = true;
      this.loadingText = '加载中...'
      setTimeout(() => {
        this.loadingText = '加载完成'
        let length = this.texts.length;
        for (let i = length; i < length + 5; i ++) {
          this.texts.push(i);
        }
        this.loadingText = '上拉加载'
        this.pullingUp = false;
      }, 2000);
    }
  }

}

export default new Refresh_view();
</script>
<style>
.container {
  flex: 1;
  width: 750cpx;
}
.text-item {
  width: 710cpx;
  text-align: center;
  line-height: 160cpx;
  height: 160cpx;
  background: #69BE96;
  border: 1px solid #666;
  border-radius: 10cpx;
  align-self: center;
  font-size: 60cpx;
  color: white;
  margin: 20cpx;
}
.loading-text {
  height: 80cpx;
  line-height: 80cpx;
  text-align: center;
  color: #999;
  font-size: 24cpx;
}
</style>

<script cml-type="json">
{
  "base": {}
}
</script>

Bug & Tip

1. refresh-view为全屏组件。
2. 如果子组件的总高度高于其本身，那么所有的子组件都可滚动。