scroller


可滚动视图区域。

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

属性

属性名 类型 必填 默认值 说明
height Number scroll-direction为`vertical`时必传 0 定义纵向滚动区域的高度
width Number scroll-direction为`horizontal`时必传 0 定义横向滚动区域的宽度
scroll-direction String vertical 定义滚动的方向。可选为 horizontal 或者 vertical
bottom-offset Number 0 距底部/右边多远时(单位cpx),触发 onBottom 事件
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="{{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> 组件。

results matching ""

    No results matching ""