Appearance

目录

<scroller> ​

<scroller>是Tenon中可以滚动的容器

属性 ​

属性名类型默认值说明
scrollDirectionString'vertical'滚动方向：
vertical 垂直滚动
horizontal 水平滚动
showScrollBarBooleanfalse是否展示滚动条
bouncesBooleantrue滑动到边缘的时候是否有回弹效果

方法 ​

方法名参数返回值说明
scrollTo(x:number, y:number)void滚动到制定位置（x,y单位是px）
scrollBy(dx:number, dy:number)void滚动一定的偏移量（x,y单位是px）
scrollToTop()void滚动到顶部，如果是水平组件则滚动到最左侧
scrollToBottom()void滚动到底部，如果是水平组件则滚动到最右侧
stopPullRefresh()void结束下拉刷新
stopLoadMore(enable: boolean)void结束加载更多(enable 下次是否还能加载更多)

子组件 ​

除支持任意子组件外，还支持两个特殊子组件分别为：

<refresh> ​

触发下拉刷新时的View

备注：refresh视图内可添加任意子组件

<loadmore> ​

触发上拉加载更多时的View

备注：loadmore视图内可添加任意子组件

TIP

refresh和 loadmore仅在 scroller 组件下有效(即需要保证refresh和 loadmore的父组件是 scroller 才可以生效)。

样式 ​

通用样式，可参考样式介绍

事件 ​

通用事件，可参考事件介绍

scroll 滚动事件 ​

@param(scrollEvent) scrollEvent属性

属性名类型说明示例
typeString事件类型type: 'scroll'
stateNumber手势状态
状态说明:
0:normal（初始禁止状态）,
1:began（开始滚动）,
2:scroll（滚动中）,
3:ended（停止滚动）,
4:scroll_up（滚动过程中，手指抬起)		state: 1
timestampNumber时间戳timestamp: 1578973450142
offsetXNumberx方向实际滚动偏移量（单位：px）offsetX: 10
offsetYNumbery方向实际滚动偏移量（单位：px）offsetY: 10
dxNumberx方向滚动与上一个事件的差值（单位：px）dx: 10
dyNumbery方向滚动与上一个事件的差值（单位：px）dy: 10

onRefresh 下拉刷新事件 ​

@param(state)

属性名类型说明示例
stateString刷新状态
状态说明:
0:初始状态/结束刷新
1:开始下拉
2:正在刷新		state: 1

onLoadMore 加载更多事件 ​

@param(state)

属性名类型说明示例
stateString加载状态
状态说明:
0:初始状态/结束加载
1:正在加载
2:无更多数据		state: 1

示例 ​


Tenon Vue ​

html
<!-- App.vue -->
<template>
  <scroller>
    <refresh>
      <text>I am refresh view!</text>
    </refresh>
    <loadmore>
      <text>I am loadmore view!</text>
    </loadmore>
    <view>
      <text>I am Scroller Text 1!</text>
      <text>I am Scroller Text 1!</text>
    </view>
  </scroller>
</template>
<script>
  export default{}
</script>

更多用法，可参考Tenon Vue 官方示例。

Tenon React ​

jsx
import React, {useState} from "react"

import Tenon from "@hummer/tenon-react"

function ScrollerApp() {

  return (
    <scroller>
      <refresh>
        <text>I am refresh view!</text>
      </refresh>
      <loadmore>
        <text>I am loadmore view!</text>
      </loadmore>
      <view>
        <text>I am Scroller Text 1!</text>
        <text>I am Scroller Text 1!</text>
      </view>
    </scroller>
  );
}

Tenon.render(<ScrollerApp />)

更多用法，可参考Tenon React 官方示例。