native-scroller

---

用于【垂直方向】的滚动视图区域。

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

属性

无

示例

<template>
  <view class="container">
    <native-scroller
    >
      <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>
    </native-scroller>
  </view>
</template>

<script>
class Scroller {
  data = {
    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;
    }
  };
  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 NativeScroller();
</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

用不到scroller组件的各种事件/属性的,可选择这个组件，拥有各端的原生滚动体验。