Chameleon 变色龙

# refresh-view

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

# 属性

属性名 类型 必填 默认值 说明
enablePullUpLoad Boolean 否 false 是否开启上拉加载
pullUpLoadComplete Boolean 使用上拉加载时必传 false 当数据加载完成后修改该值更新状态
pullingUp Boolean 无 上拉加载中
pullUpStart Number 否 50 触发上拉加载的的距离
pullUpStop Number 否 80 上拉加载动画停留的位置高度
pullDownStart Number 否 50 下拉刷新开始位置距离
pullDownStop Number 否 80 下拉刷新动画停留的位置高度
pullingDown Boolean 否 false 下拉刷新中
c-bind:onPullUpLoad EventHandle 否 上拉加载时触发
c-bind:onPullDownRefresh EventHandle 否 下拉刷新时触发

# 示例

<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 RefreshView {
  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 RefreshView();
</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 & Tips

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

← button →