list

可滚动长列表。

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

<cell> 使用文档 cell。

属性

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

限制

  • 不允许相同方向的 <list> 或者 <scroller> 互相嵌套，换句话说就是嵌套的 <list>/<scroller> 必须是不同的方向。
    举个例子，不允许一个垂直方向的 <list> 嵌套的一个垂直方向的 <scroller> 中，但是一个垂直方向的 <list> 是可以嵌套的一个水平方向的 list 或者 <scroller> 中的。

示例

  2. <template>
  3.   <view class="container">
  4.     <list
  5.       bottom-offset="{{bottomOffset}}"
  6.       c-bind:scrolltobottom="onBottom"
  7.       c-bind:onscroll="onScroll"
  8.       height="{{-1}}"
  9.     >
  10.         <cell
  11.           class="cell"
  12.           c-for="{{lists}}"
  13.           c-for-index="i"
  14.           c-for-item="item"
  15.           data-idx="{{i}}"
  16.         >
  17.           <view class="panel">
  18.             <text class="text">{{item}}</text>
  19.           </view>
  20.         </cell>
  21.     </list>
  22.   </view>
  23. </template>
  25. <script>
  26. import cml from 'chameleon-api'
  28. const LOADMORE_COUNT = 4
  30. class List {
  31.   data = {
  32.     /**
  33.      * list 配置 子元素必须是 cell 标签
  34.      */
  35.     bottomOffset: 20,
  36.     lists: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  37.   }
  38.   methods = {
  39.     onBottom(e) {
  40.       cml.showToast({
  41.         message: "loadmore",
  42.         duration: 1000
  43.       });
  45.       setTimeout(() => {
  46.         const length = this.lists.length
  47.         for (let i = length; i < length + LOADMORE_COUNT; ++i) {
  48.           this.lists.push(i + 1)
  49.         }
  50.       }, 800)
  51.     },
  52.     onScroll(e) {
  53.     }
  54.   }
  55. }
  57. export default  new List();
  59. </script>
  60. <style scoped>
  61. .container {
  62.   position: absolute;
  63.   top: 88cpx;
  64.   left: 0;
  65.   right: 0;
  66.   bottom: 0;
  67. }
  68. .panel {
  69.   display: flex;
  70.   width: 600cpx;
  71.   height: 300cpx;
  72.   margin-left: 75cpx;
  73.   margin-top: 35cpx;
  74.   margin-bottom: 35cpx;
  75.   flex-direction: column;
  76.   justify-content: center;
  77.   border-width: 2px;
  78.   border-style: solid;
  79.   border-color: rgb(162, 217, 192);
  80.   background-color: rgba(162, 217, 192, 0.2);
  81. }
  82. .text {
  83.   font-size: 88cpx;
  84.   text-align: center;
  85.   color: #41B883;
  86. }
  88. </style>
  90. <script cml-type="json">
  91. {
  92.   "base": {}
  93. }
  94. </script>

list - 图1wx

list - 图2web

list - 图3native

Bug & Tip

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