list

可滚动长列表。

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

<cell> 使用文档 cell。

属性

属性名类型必填默认值说明
heightNumber必传0定义滚动区域的高度
bottom-offsetNumber否0距底部/右边多远时（单位cpx），触发 onBottom 事件
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="{{winHeight}}"
  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.     winHeight: 0
  38.   }
  39.   mounted(res) {
  40.     cml.getSystemInfo().then((info)=>{
  41.       this.winHeight = Number(info.viewportHeight)
  42.     })
  43.   }
  44.   methods = {
  45.     onBottom(e) {
  46.       cml.showToast({
  47.         message: "loadmore",
  48.         duration: 1000
  49.       });
  51.       setTimeout(() => {
  52.         const length = this.lists.length
  53.         for (let i = length; i < length + LOADMORE_COUNT; ++i) {
  54.           this.lists.push(i + 1)
  55.         }
  56.       }, 800)
  57.     },
  58.     onScroll(e) {
  59.     }
  60.   }
  61. }
  63. export default  new List();
  65. </script>
  66. <style scoped>
  67. .container {
  68.   position: absolute;
  69.   top: 88cpx;
  70.   left: 0;
  71.   right: 0;
  72.   bottom: 0;
  73. }
  74. .panel {
  75.   display: flex;
  76.   width: 600cpx;
  77.   height: 300cpx;
  78.   margin-left: 75cpx;
  79.   margin-top: 35cpx;
  80.   margin-bottom: 35cpx;
  81.   flex-direction: column;
  82.   justify-content: center;
  83.   border-width: 2cpx;
  84.   border-style: solid;
  85.   border-color: rgb(162, 217, 192);
  86.   background-color: rgba(162, 217, 192, 0.2);
  87. }
  88. .text {
  89.   font-size: 88cpx;
  90.   text-align: center;
  91.   color: #41B883;
  92. }
  94. </style>
  96. <script cml-type="json">
  97. {
  98.   "base": {}
  99. }
  100. </script>

list - 图1wx

list - 图2web

list - 图3native

推荐使用

  • 视窗为填满设备屏幕，示例如下
    <list> 为根节点时无需设置高度，但是内嵌 <list> 高度必须可计算，你可以使用 flex 或 postion 将 <list> 设为一个响应式高度（例如全屏显示）, 也可以显式设置 <list> 组件的 height 样式。
  1. <view style="position:absolute;top: 0;left: 0;bottom: 0;right: 0;">
  2.   <list>
  3.     ...
  4.   </list>
  5. </view>

Bug & Tip

  • <list>组件的父容器必须为可定位元素， <list>内容的布局由父容器决定。
  • <list> 中不可以使用 <textarea>、<video> 组件。