Tenon Vue Plugin List

<ex-list>

简介

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

属性

| 属性名 | 类型 | 默认值 | 说明 | | :-------- | :--------:| :------: | :-------:| | data | Array | [] | 绑定的数据结构|

样式

• 支持通用样式，可参考样式介绍

方法

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

事件

refresh

下拉刷新事件

@param(state) | 属性名 | 类型 | 说明 | 示例 | | ---- | ---- | ---- | ---- | | state | String | 刷新状态状态说明:0:初始状态/结束刷新1:开始下拉2:正在刷新 | state: 1|

loadMore

加载更多事件

@param(state) | 属性名 | 类型 | 说明 | 示例 | | ---- | ---- | ---- | ---- | | state | String | 加载状态状态说明:0:初始状态/结束加载1:正在加载2:无更多数据 | state: 1|

Vue示例

  <ex-list
    class="list"
    :data="list"
    @refresh="handleRefresh"
    @loadMore="handleLoadMore"
  >
    <template v-slot:refresh>
      <view>
        <text>Refresh View</text>
      </view>
    </template>
    <template v-slot:loadmore>
      <view>
        <text>Load More View</text>
      </view>
    </template>
    <template v-slot:item="item">
      <view class="list-item" @tap="handleItemTap(item)">
        <text class="default-text">I Am Default View!</text>
      </view>
    </template>
  </ex-list>