Appearance

目录

HorizontalScroller ​

水平滚动组件。

样式 ​

支持 通用布局样式 和 通用视图样式 。

属性 ​

除支持 通用视图属性 以外，还支持以下属性：

属性名类型默认值说明示例
showScrollBarbooleanfalse滑动时是否显示滚动条showScrollBar: true
bouncesbooleantrue滑动到边缘时是否有回弹效果bounces: false

事件 ​

事件名类型说明
scrollScrollEvent滚动事件

方法 ​

js
/**
 * 添加子视图
 * @param child 子视图
 */
appendChild(child: View);
js
/**
 * 移除子视图
 * @param child 子视图
 */
removeChild(child: View);
js
/**
 * 移除所有子视图
 */
removeAll();
js
/**
 * 在制定子视图前插入一个子视图
 *
 * @param child 新的子视图
 * @param existingChild 指定的子视图
 */
insertBefore(child: View, existingChild: View);
js
/**
 * 把指定的子视图替换成另一个子视图
 * 
 * @param newChild 新的子视图
 * @param oldChild 指定的子视图
 */
replaceChild(newChild: View, oldChild: View);
js
/**
 * 滚动到指定坐标（单位：dp/pt/hm/px）
 */
scrollTo(x: Object, y: Object);
js
/**
 * 滚动一定距离（单位：dp/pt/hm/px）
 */
scrollBy(dx: Object, dy: Object);
js
/**
 * 滚动到顶部
 */
scrollToTop();
js
/**
 * 滚动到底部
 */
scrollToBottom();
js
/**
 * 滚动到顶部事件监听
 */
setOnScrollToTopListener(callback: () => void);
js
/**
 * 滚动到底部事件监听
 */
setOnScrollToBottomListener(callback: () => void);

示例 ​

js
class RootView extends View {
    constructor() {
        super();
        let environment = Hummer.env;

        this.style = {
            flexDirection: 'column',
            width: environment.availableWidth,
        };

        let scroll = new HorizontalScroller();
        scroll.style = {
            width: Hummer.env.availableWidth,
        }

        for (let i = 0; i < 20; i++) {
            let item = new Text();
            item.text = "" + i;
            item.style = {
                height: 120,
                margin: 15,
                backgroundColor: '#FF000022',
                textAlign: 'center',
                flexGrow: 1,
            };
            scroll.appendChild(item);
        }

        scroll.addEventListener('scroll', (event) => {
            console.log('state = ' + event.state);
            console.log('dx = ' + event.dx);
            console.log('dy = ' + event.dy);
        })
        scroll.setOnScrollToTopListener(() => {
            console.log('ScrollToTop!');
        })
        scroll.setOnScrollToBottomListener(() => {
            console.log('ScrollToBottom!');
        })

        this.appendChild(scroll);
    }
}

Hummer.render(new RootView());