scroller

可滚动视图区域。

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

属性

属性名类型必填默认值说明
heightNumberscroll-direction为vertical时必传无定义纵向滚动区域的高度 注意： 1、<scroller> height="{{100}}" /> 这样传值才是Number类型 2、height为-1时，<scroller>的可滚动区域高度为scroller放置点至页面底部
widthNumberscroll-direction为horizontal时必传无定义横向滚动区域的宽度 注意： height为-1时，<scroller>填充页面剩余宽度
scroll-directionString否vertical定义滚动的方向。可选为 horizontal 或者 vertical
cstyleString否自定义组件内联样式
bottom-offsetNumber否0距底部/右边多远时（单位cpx），触发 onBottom 事件
scroll-topNumber否0scroll-direction为vertical时，设置滚动到的位置，（单位cpx）
scroll-leftNumber否0scroll-direction为horizontal时，设置滚动到的位置，（单位cpx）
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> 中的。

示例

  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="{{-1}}"
  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. class Scroller  {
  28.   data = {
  29.     /**
  30.      * scroller 配置
  31.      */
  32.     bottomOffset: 20,
  33.     scrollDirection: 'vertical',
  34.     panels: [
  35.     ],
  36.     rows: []
  37.   }
  38.   methods = {
  39.     change (e) {
  40.         let target = e.currentTarget
  41.         let dataset = target.dataset
  42.         let i = dataset.idx
  44.         const item = this.panels[i]
  45.         if (item) {
  46.             item.height = item.height === 200 ? 400 : 200
  47.             item.width = item.width === 330 ? 730 : 330
  48.             item.computedStyle = this.$cmlStyle(`height:${item.height}cpx;width:${item.width}cpx;background-color:${item.bgc};opacity:${item.opacity}`)
  49.         }
  50.     },
  51.     randomfn () {
  52.         let ary = [];
  53.         for(let i = 1; i<= 40; i++) {
  54.             let item = {label: i ,height: 200 , width:730, bgc:'#69BE96',opacity:1}
  55.             item.computedStyle = this.$cmlStyle(`height:${item.height}cpx;width:${item.width}cpx;background-color:${item.bgc};opacity:${item.opacity}`)
  57.             ary.push(item)
  58.         }
  59.         return ary;
  60.     },
  61.     onScroll(e) {
  62.       console.log(e);
  63.     },
  64.     onBottom(e) {
  65.       console.log(e);
  66.     }
  67.   }
  68.   created (res) {
  69.     this.panels = this.randomfn()
  71.     for (let i = 0; i < 30; i++) {
  72.       this.rows.push('row ' + i)
  73.     }
  74.     console.log('demo page created:', res)
  75.   }
  76. }
  77. export default new Scroller();
  79. </script>
  80. <style scoped>
  81. .container {
  82.   position: absolute;
  83.   top: 0;
  84.   left: 0;
  85.   right: 0;
  86.   bottom: 0;
  87. }
  88. .title {
  89.   text-align: center;
  90.   flex-direction: row;
  91.   justify-content: center;
  92. }
  93. .panel {
  94.     display: flex;
  95.     margin: 10cpx;
  96.     top:10cpx;
  97.     align-items: center;
  98.     justify-content: center;
  99.     text-align: center;
  100.     border: 1px solid #666;
  101.     border-radius: 10cpx;
  102.     transition-property: width,height;
  103.     transition-duration: 0.5s;
  104.     transition-delay: 0s;
  105.     transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  106. }
  107. .cell{
  108.     display: flex;
  109.     background-color:white;
  110.     flex-direction: row;
  111. }
  113. .text {
  114.     font-size: 60cpx;
  115.     color: white;
  117. }
  119. </style>
  121. <script cml-type="json">
  122. {
  123.   "base": {}
  124. }
  125. </script>

scroller - 图1wx

scroller - 图2web

scroller - 图3native

Bug & Tip

  • 使用竖向滚动时，<scroller>需要有一个固定高度。
  • 如果子组件的总高度高于其本身，那么所有的子组件都可滚动。
  • <scroller>可以当作根元素或者嵌套元素使用。
  • <scroller> 中不可以使用 <textarea>、<video> 组件。
  • <scroller> 中不建议在<scroller>上面加class改变样式，可以通过cstyle属性传入内联样式。
  • <scroller> 的子组件定位无效。