Chameleon 变色龙

# scroller

可滚动视图区域。

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

wx
web
native

# 属性

属性名 类型 必填 默认值 说明
cstyle String 否 自定义组件内联样式
height Number scroll-direction为`vertical`时必传 无 定义纵向滚动区域的高度
注意：
1、<scroller> height="100" />
这样传值才是Number类型
2、height为-1时，<scroller>的可滚动区域高度为scroller放置点至页面底部
width Number scroll-direction为`horizontal`时必传 无 定义横向滚动区域的宽度
注意：
height为-1时，<scroller>填充页面剩余宽度
scroll-direction String 否 vertical 定义滚动的方向。可选为 horizontal 或者 vertical
bottom-offset Number 否 0 距底部/右边多远时（单位cpx），触发 onBottom 事件
scroll-top Number 否 0 scroll-direction为`vertical`时，设置滚动到的位置，（单位cpx）
scroll-left Number 否 0 scroll-direction为`horizontal`时，设置滚动到的位置，（单位cpx）
bounce Boolean 否 true 上拉下拉是否回弹(仅支持web)
c-bind:scrolltobottom EventHandle 否 滚动到底部，会触发 scrolltobottom 事件
返回事件对象：
event.type= "scrolltobottom"
event.detail = { direction }
c-bind:onscroll EventHandle 否 滚动时触发，
返回事件对象：
event.type = 'scroll'
event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY}

# 限制

不允许相同方向的 <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="{{-1}}"
    >
      <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>
class Scroller {
  data = {
    /**
     * scroller 配置
     */
    bottomOffset: 20,
    scrollDirection: 'vertical',
    panels: [],
    rows: [],
  };
  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) {
      console.log(e);
    },
    onBottom(e) {
      console.log(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);
  }
}
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);
}
.cell {
  display: flex;
  background-color: white;
  flex-direction: row;
}

.text {
  font-size: 60cpx;
  color: white;
}
</style>

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

# Bug & Tips

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

← native-scroller →