Appearance

目录

<ex-list> ​

<ex-list>是Tenon中高性能的长列表组件

属性 ​

属性名类型默认值说明
dataArray[]绑定的数据结构

样式 ​

属性名类型默认值说明示例
属性名说明取值类型示例/可能取值
modestring'list'布局模式mode: 'list' | 'grid' | 'waterfall'
scrollDirectionstring'vertical'滚动方向(仅在list模式下生效)scrollDirection: 'vertical' | 'horizontal'
columnnumber2列数（仅在 grid 和 waterfall 模式下生效）column: 3
lineSpacingnumber|string0dp（waterfall: 8dp）行距lineSpacing: 4
itemSpacingnumber|string0dp（waterfall: 8dp）列距（仅在 grid 和 waterfall 模式下生效）itemSpacing: 4
leftSpacingnumber|string0dp列表最左边缘间距leftSpacing: 4
rightSpacingnumber|string0dp列表右边缘间距rightSpacing: 4
topSpacingnumber|string0dp列表最顶部边缘间距topSpacing: 4
bottomSpacingnumber|string0dp列表最底部边缘间距bottomSpacing: 4

方法 ​

方法名参数返回值说明
scrollToPosition(position:number)void滚动到指位置（position是索引）
stopPullRefresh()void结束下拉刷新
stopLoadMore(enabled: boolean)void结束加载更多(enabled: 下次能否继续触发加载更多)
refresh()void手动触发拉新

事件 ​


refresh ​

下拉刷新事件

@param(state)

属性名类型说明示例
stateString刷新状态
状态说明:
0:初始状态/结束刷新
1:开始下拉
2:正在刷新		state: 1

loadMore ​

加载更多事件

@param(state)

属性名类型说明示例
stateString加载状态
状态说明:
0:初始状态/结束加载
1:正在加载
2:无更多数据		state: 1

示例 ​


Tenon Vue ​

javascript
// entry.js
import Tenon from '@hummer/tenon-vue';

import app from './app.vue';
import List from '@hummer/vue-plugin-list';

Tenon.register(List);
Tenon.render(app);
html
<!-- App.vue -->
<template>
  <view class="list-container">
    <ex-list
      class="list"
      :data="list"
      @refresh="handleRefresh"
      @loadMore="handleLoadMore"
    >
      <template v-slot:refresh>
        <view class="refresh-view">
          <text>Refresh View</text>
        </view>
      </template>
      <template v-slot:loadmore>
        <view class="loadmore-view">
          <text>Load More View</text>
        </view>
      </template>
      <template v-slot:item="item">
        <view class="list-item" @tap="handleItemTap(item)">
          <text>index: {{ item.index }}</text>
          <text>item: {{ item.data.name }}</text>
        </view>
      </template>
    </ex-list>
  </view>
</template>
<script>
  export default{
    data(){
      return {
        list: Array.apply(null, new Array(20)).map((item, index) => {
          return {
            name: "Index-" + index,
          };
        }),
      }
    },
    methods: {
      handleRefresh(state, list) {
        console.log("refresh state", state);
        if (state === 1) {
          console.log("下拉刷新");
        } else if (state === 2) {
          console.log("加载中");
          this.refreshList(list);
        } else {
          console.log("加载完毕");
        }
      },
      handleLoadMore(state, list) {
        console.log("loadmore state:", state);
        if (state === 0) {
          console.log("上拉加载");
        } else if (state === 1) {
          console.log("加载中...");
          this.loadMoreData(list);
        } else {
          console.log("加载完成");
        }
      },
      refreshList(list) {
        setTimeout(() => {
          this.list = Array.apply(null, new Array(10)).map((item, index) => {
            return {
              index: index,
              name: "Index Refresh - " + index,
            };
          });
          list.stopPullRefresh();
        }, 2000);
      },
      loadMoreData(list) {
        setTimeout(() => {
          this.curPage++;
          this.list = this.list.concat(
            Array.apply(null, new Array(10)).map((item, index) => {
              let i = this.curPage * 10 + index;
              return {
                index: i,
                name: "Index Refresh - " + i,
              };
            })
          );
          if (this.curPage >= 3) {
            list.stopLoadMore(false);
          } else {
            list.stopLoadMore(true);
          }
        }, 500);
      }
    }
  }
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

支持中