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 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. 如果子组件的总高度高于其本身,那么所有的子组件都可滚动。

results matching ""

    No results matching ""