scroller

可滚动视图区域。

可容纳排成一列的子组件的滚动器。

属性

属性名类型必填默认值说明
heightNumberscroll-direction为vertical时必传0定义纵向滚动区域的高度
widthNumberscroll-direction为horizontal时必传0定义横向滚动区域的宽度
scroll-directionString否vertical定义滚动的方向。可选为 horizontal 或者 vertical
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> 中的。

示例

  1. <template>
  2. <view class="container">
  3.   <scroller
  4.     scroll-direction="{{scrollDirection}}"
  5.     bottom-offset="{{bottomOffset}}"
  6.     c-bind:scrolltobottom="onBottom"
  7.     c-bind:onscroll="onScroll"
  8.     height="{{winHeight}}"
  9.   >
  10.       <view
  11.         class="cell"
  12.         c-for="{{panels}}"
  13.         c-for-index="i"
  14.         c-for-item="item"
  15.         c-bind:tap="change"
  16.         data-idx="{{i}}"
  17.       >
  18.           <view class="panel" style="{{item.computedStyle}}">
  19.                <text class="text">{{item.label}}</text>
  20.           </view>
  21.       </view>
  22.   </scroller>
  23. </view>
  24. </template>
  26. <script>
  27. import cml from "chameleon-api"
  28. class Scroller  {
  29.   data = {
  30.     /**
  31.      * scroller 配置
  32.      */
  33.     bottomOffset: 20,
  34.     scrollDirection: 'vertical',
  35.     panels: [
  36.     ],
  37.     rows: [],
  38.     winHeight: 0
  39.   }
  40.   methods = {
  41.     change (e) {
  42.         let target = e.currentTarget
  43.         let dataset = target.dataset
  44.         let i = dataset.idx
  46.         const item = this.panels[i]
  47.         if (item) {
  48.             item.height = item.height === 200 ? 400 : 200
  49.             item.width = item.width === 330 ? 730 : 330
  50.             item.computedStyle = this.$cmlStyle(`height:${item.height}cpx;width:${item.width}cpx;background-color:${item.bgc};opacity:${item.opacity}`)
  51.         }
  52.     },
  53.     randomfn () {
  54.         let ary = [];
  55.         for(let i = 1; i<= 40; i++) {
  56.             let item = {label: i ,height: 200 , width:730, bgc:'#69BE96',opacity:1}
  57.             item.computedStyle = this.$cmlStyle(`height:${item.height}cpx;width:${item.width}cpx;background-color:${item.bgc};opacity:${item.opacity}`)
  59.             ary.push(item)
  60.         }
  61.         return ary;
  62.     },
  63.     onScroll(e) {
  65.     },
  66.     onBottom(e) {
  68.     }
  69.   }
  70.   created (res) {
  71.     this.panels = this.randomfn()
  73.     for (let i = 0; i < 30; i++) {
  74.       this.rows.push('row ' + i)
  75.     }
  76.     console.log('demo page created:', res)
  77.   }
  78.   mounted (res) {
  79.     cml.getSystemInfo().then((info)=>{
  80.       this.winHeight = Number(info.viewportHeight)
  81.     })
  82.   }
  83. }
  84. export default new Scroller();
  86. </script>
  87. <style scoped>
  88. .container {
  89.   position: absolute;
  90.   top: 0;
  91.   left: 0;
  92.   right: 0;
  93.   bottom: 0;
  94. }
  95. .title {
  96.   text-align: center;
  97.   flex-direction: row;
  98.   justify-content: center;
  99. }
  100. .panel {
  101.     display: flex;
  102.     margin: 10cpx;
  103.     top:10cpx;
  104.     align-items: center;
  105.     justify-content: center;
  106.     text-align: center;
  107.     border: 1px solid #666;
  108.     border-radius: 10cpx;
  109.     transition-property: width,height;
  110.     transition-duration: 0.5s;
  111.     transition-delay: 0s;
  112.     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  113. }
  114. .cell{
  115.     display: flex;
  116.     background-color:white;
  117.     flex-direction: row;
  118. }
  120. .text {
  121.     font-size: 60cpx;
  122.     color: white;
  124. }
  126. </style>
  128. <script cml-type="json">
  129. {
  130.   "base": {}
  131. }
  132. </script>
  134. </script>

scroller - 图1wx

scroller - 图2web

scroller - 图3native

推荐使用

  • 视窗为设备屏幕，示例如下
  1. <view style="position:absolute;top: 0;left: 0;bottom: 0;right: 0;">
  2.   <scroller>
  3.     ...
  4.   </scroller>
  5. </view>

Bug & Tip

  • 使用竖向滚动时，<scroller>需要有一个固定高度。
  • 如果子组件的总高度高于其本身，那么所有的子组件都可滚动。
  • <scroller>可以当作根元素或者嵌套元素使用。
  • <scroller> 中不可以使用 <textarea>、<video> 组件。