List滚动列表

引入

{
  "usingComponents": {
    "x-nav-bar":"../assembly/nav-bar/nav-bar",
    "x-cell":"../assembly/cell/cell",
    "x-list": "../assembly/list/list"
  },
  "state": {
    "list": [
      { "name": "name1" },
      { "name": "name2" },
      { "name": "name3" },
      { "name": "name4" },
      { "name": "name5" },
      { "name": "name6" },
      { "name": "name7" },
      { "name": "name8" },
      { "name": "name9" },
      { "name": "name10" }
    ]
  }
}

代码示例

 <x-list onLoadMore="onLoadMore" loadingText="正在加载中">
  <view>
    <x-cell a:for="{{list}}" title="{{item.name}}" border="{{ true }}"></x-cell>
  </view>
</x-list>

效果展示

组件样式

axml

<view class="list">
  <x-nav-bar showArrow="{{true}}" title="测试 list 组件"></x-nav-bar>
  <view class="list-box">
    <x-list load="loadMore" loadingText="正在加载中">
      <view>
        <x-cell a:for="{{list}}" title="{{item.name}}" border="{{ true }}"></x-cell>
      </view>
    </x-list>
  </view>
</view>

css

.list {
    width: 100vw;
    height: 100vh;
    background-color: #F0F2F7;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.list-box {
    width: 100%;
    flex: 1;
    overflow: hidden;
}

json

{
  "usingComponents": {
    "x-nav-bar":"../assembly/nav-bar/nav-bar",
    "x-cell":"../assembly/cell/cell",
    "x-list": "../assembly/list/list"
  },
  "state": {
    "random": "为了数据能够变化",
    "list": [
      { "name": "name1" },
      { "name": "name2" },
      { "name": "name3" },
      { "name": "name4" },
      { "name": "name5" },
      { "name": "name6" },
      { "name": "name7" },
      { "name": "name8" },
      { "name": "name9" },
      { "name": "name10" }
    ]
  }
}

ts

import {console, Page, Props, Target, Event, TouchEvent} from 'waft';
import {JSONArray, JSONObject} from 'waft-json';
import { lodash, CallbackEvent } from "waft-ui-common";

export class TestList extends Page {
  start: i32 = 10;
  constructor(props: Props) {
    super(props);
  }

  /**
   * 加载更多
   * @param event
   * @param target
   */
   onLoadMore(e: Event): void {
    console.log('====### 进入 loadMore');
    lodash.request({
      url: 'https://getman.cn/mock/waft/testList',
      method: 'GET',
      data: new JSONObject(),
      target: this,
      event: e,
      success: (data: JSONObject, target: Target | null, event) => {
        console.log('====### request data is: ' + data.toString());
        const _this = target as TestList;
        const option = event as CallbackEvent;

        // 回调给 list
        const callbackData = new JSONObject();
        callbackData.set('loading', false); // 也可以不写, 默认为 false
        callbackData.set('finished', false); // 是否没有更多数据了, 可不传, 默认为 false
        callbackData.set('error', false); // 是否发生错误, 可不传, 默认 false
        // callbackData.set('errorText', ''); // 自定义错误的文本, 可不传, 默认为 '出错了呢', 注意: 传 '' 会不显示
        option.callback(option, callbackData);

        // 拼接并设置数据
        const list = lodash.get(_this.state, 'list', new JSONArray());
        const newList = list.arrayValue().concat(lodash.get(data, 'list', new JSONArray()).arrayValue());
        const state = new JSONObject();
        state.set('list', newList);
        console.log('====### 最终数据' + state.toString());
        _this.setState(state);
      }
    });
  }
}

API

• props | 参数 | 说明 | 类型 | 默认值 | | —- | —- | —- | —- | | offset | 距离底部多少触发 load 事件 | number | 40 | | loadingText | 加载中的文字 | string | 加载中 | | finishedText | 加载完的文字 | string | 没有更多内容了呢 | | errorText | 加载出错的文字 | string | 出错了呢 | | immediate | 是否在初始化时立即调用 onLoad | boolean | true | | direction | 滚动方向, 默认向下, 支持 column | row | string | column |

• Events | 事件名 | 说明 | 参数 | | —- | —- | —- | | load | 加载的回调函数, (callback) => callback(data: JSONObject, event: CallbackEvent) | data = { loading: false, finished: false, error: false, errorText: ‘优先级大于 props’ } |

• slot | 名称 | 说明 | | —- | —- | | default | 列表的内容 |