# list


可滚动长列表。

<list> 标签内可包含多条 <cell>,适合用于长列表的展示。

<cell> 使用文档cell

# 属性

属性名 类型 必填 默认值 说明
cstyle String 自定义组件内联样式
height Number 必传 定义滚动区域的高度
注意:
1、<list> height="100" />
这样传值才是Number类型
2、height为-1时,<list> 的可滚动区域高度为list放置点至页面底部
bottom-offset Number 0 距底部/右边多远时(单位cpx),触发 onBottom 事件
to-element String 滚动到的元素,仅支持ref(web、weex端)
bounce Boolean true 上拉下拉是否回弹(仅支持web)
c-bind:scrolltobottom EventHandle 滚动到底部,会触发 scrolltobottom 事件
返回事件对象:
event.type= "scrolltobottom"
event.detail = { direction }
c-bind:onscroll EventHandle 滚动时触发,
返回事件对象:
event.type = 'scroll'
event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

# 限制

  1. 不允许相同方向的 <list> 或者 <scroller> 互相嵌套,换句话说就是嵌套的 <list>/<scroller> 必须是不同的方向。

举个例子,不允许一个垂直方向的 <list> 嵌套的一个垂直方向的 <scroller> 中,但是一个垂直方向的 <list> 是可以嵌套的一个水平方向的 list 或者 <scroller> 中的。

# 示例

<template>
  <view class="container">
    <list
      bottom-offset="{{bottomOffset}}"
      c-bind:scrolltobottom="onBottom"
      c-bind:onscroll="onScroll"
      height="{{-1}}"
    >
      <cell class="cell" c-for="{{lists}}" c-for-index="i" c-for-item="item" data-idx="{{i}}">
        <view class="panel">
          <text class="text">{{ item }}</text>
        </view>
      </cell>
    </list>
  </view>
</template>

<script>
import cml from 'chameleon-api';

const LOADMORE_COUNT = 4;

class List {
  data = {
    /**
     * list 配置 子元素必须是 cell 标签
     */
    bottomOffset: 20,
    lists: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  };
  methods = {
    onBottom(e) {
      cml.showToast({
        message: 'loadmore',
        duration: 1000,
      });

      setTimeout(() => {
        const length = this.lists.length;
        for (let i = length; i < length + LOADMORE_COUNT; ++i) {
          this.lists.push(i + 1);
        }
      }, 800);
    },
    onScroll(e) {},
  };
}

export default new List();
</script>
<style scoped>
.container {
  position: absolute;
  top: 88cpx;
  left: 0;
  right: 0;
  bottom: 0;
}
.panel {
  display: flex;
  width: 600cpx;
  height: 300cpx;
  margin-left: 75cpx;
  margin-top: 35cpx;
  margin-bottom: 35cpx;
  flex-direction: column;
  justify-content: center;
  border-width: 2px;
  border-style: solid;
  border-color: rgb(162, 217, 192);
  background-color: rgba(162, 217, 192, 0.2);
}
.text {
  font-size: 88cpx;
  text-align: center;
  color: #41b883;
}
</style>

<script cml-type="json">
{
  "base": {}
}
</script>
wx
web
native

# Bug & Tips

  1. <list>组件的父容器必须为可定位元素, <list>内容的布局由父容器决定。
  2. <list> 中不可以使用 <textarea><video> 组件。
  3. <list> 中不建议在<list>上加 class 改变样式,可以通过 cstyle 属性传入内联样式。
  4. <list> 的子组件定位无效。