cell

子列表项容器。

示例

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