scroller

可滚动视图区域。

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

属性

限制

不允许相同方向的 <list> 或者 <scroller> 互相嵌套，换句话说就是嵌套的 <list>/<scroller> 必须是不同的方向。

举个例子，不允许一个垂直方向的 <list> 嵌套的一个垂直方向的 <scroller> 中，但是一个垂直方向的 <list> 是可以嵌套的一个水平方向的 <list> 或者 <scroller> 中的。

示例

<template>
<view class="container">
  <scroller
    scroll-direction="{{scrollDirection}}"
    bottom-offset="{{bottomOffset}}"
    c-bind:scrolltobottom="onBottom"
    c-bind:onscroll="onScroll"
    height="{{winHeight}}"
  >
      <view
        class="cell"
        c-for="{{panels}}"
        c-for-index="i"
        c-for-item="item"
        c-bind:tap="change"
        data-idx="{{i}}"
      >
          <view class="panel" style="{{item.computedStyle}}">
               <text class="text">{{item.label}}</text>
          </view>
      </view>
  </scroller>
</view>
</template>

<script>
import cml from "chameleon-api"
class Scroller  {
  data = {
    /**
     * scroller 配置
     */
    bottomOffset: 20,
    scrollDirection: 'vertical',
    panels: [
    ],
    rows: [],
    winHeight: 0
  }
  methods = {
    change (e) {
        let target = e.currentTarget
        let dataset = target.dataset
        let i = dataset.idx

        const item = this.panels[i]
        if (item) {
            item.height = item.height === 200 ? 400 : 200
            item.width = item.width === 330 ? 730 : 330
            item.computedStyle = `height:${item.height}cpx;width:${item.width}cpx;background-color:${item.bgc};opacity:${item.opacity}`
        }
    },
    randomfn () {
        let ary = [];
        for(let i = 1; i<= 40; i++) {
            let item = {label: i ,height: 200 , width:730, bgc:'#69BE96',opacity:1}
            item.computedStyle = `height:${item.height}cpx;width:${item.width}cpx;background-color:${item.bgc};opacity:${item.opacity}`

            ary.push(item)
        }
        return ary;
    },
    onScroll(e) {

    },
    onBottom(e) {

    }
  }
  created (res) {
    this.panels = this.randomfn()

    for (let i = 0; i < 30; i++) {
      this.rows.push('row ' + i)
    }
    console.log('demo page created:', res)
  }
  mounted (res) {
    cml.getSystemInfo().then((info)=>{
      this.winHeight = Number(info.viewportHeight)
    })
  }
}
export default new Scroller();

</script>
<style scoped>
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.title {
  text-align: center;
  flex-direction: row;
  justify-content: center;
}
.panel {
    display: flex;
    margin: 10cpx;
    top:10cpx;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #666;
    border-radius: 10cpx;
    transition-property: width,height;
    transition-duration: 0.5s;
    transition-delay: 0s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0);
}
.cell{
    display: flex;
    background-color:white;
    flex-direction: row;
}

.text {
    font-size: 60cpx;
    color: white;

}

</style>

<script cml-type="json">
{
  "base": {}
}
</script>

</script>

wx

web

native

推荐使用

• 视窗为设备屏幕，示例如下

<view style="position:absolute;top: 0;left: 0;bottom: 0;right: 0;">
  <scroller>
    ...
  </scroller>
</view>

Bug & Tip

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