组件

Page 页面容器组件

Page 组件应作为页面的根节点，开启 scroller 模式支持配合内部的 stick 组件完成吸顶功能，开启 refresh 封装实现页面级别的下拉刷新，开启 loadMore 实现 js 级别的上拉加载的功能。

示例

// ......
class Home extends PageCore {
    render() {
        return (
            <Page
                className={styles.page_container}
                scroller
                sticky
                refresh={true}
                loadMore={this.props.listMore}
                onRefresh={this.props.refreshList}
                onScrollToLower={this.props.loadMoreList}
            >
                <Header
                    className={styles.header_top}
                    theme={headerStyles}
                    title="仿攻略首页"
                    rightText="测试router"
                    onTapLeft={this.back}
                    onTapRight={() => {
                        YIS.APP.open("router", { from: "home" });
                    }}
                />
                <Sticky className="test-sticky">
                    <Navigation />
                </Sticky>
            </Page>
        );
    }
}

说明事项

Page 组件支持调用 scrollTo 滚动到指定组件。

class TestDeom extends PageCore {
    scroll = () => {
        this.pageInst.scrollTo(this.target);
    }
    render(){
        return (
            <Page
                refresh={true}
                loadMore={true}
                onLoadMore={this.getData}
                onRefresh={this.refresh}
                ref={(d)=>{this.pageInst = d}}
            >
            	<Header title="这是标题" ref={(s) => { this.target = s }} />
              {
                  // ......
              }
              <Button
                    label="顶部"
                    ripple={true}
                    floating
                    accent
                    onTouchTap={this.scroll}
                    className={styles.back_btn}
                />
            </Page>
        )
    }
}

单级吸顶示例

代码节选自：yis-demo/src/pages/components/page/pagesticky/index.js

export default class PageStickyDemo extends PageCore {
    state = {
        indexItems: [
            {
                name: "B",
                value: "targetB",
                items: [
                    {
                        name: "北京"
                    }
                    //....
                ]
            },
        ]
    }
    scrollTo = (item) => {
        console.log(item.value);
        this.pageInst.scrollTo(this[item.value]);
    }
    renderList = () => {
        return (
            <ul>
                {
                    this.state.indexItems.map((item) => {
                        return (<div>
                            <Sticky ref={(s) => { this[item.value] = s }}>
                                <div className={styles.sticky_head}>{item.name}</div>
                            </Sticky >
                            {
                                item.items.map((city) => {
                                    return (<li className={styles.item}>{city.name}</li>)
                                })
                            }
                        </div>)
                    })
                }
            </ul>)
    }
    render() {
        return (
            <Page
                scroller
                ref={(d) => { this.pageInst = d }}
            >
                {
                    this.renderList()
                }

                <ul className={styles.index}>
                    {
                        this.state.indexItems.map((item) => {
                            return (<View onTouchTap={this.scrollTo.bind(null, item)}>
                                <li>{item.name}</li>
                            </View>)
                        })
                    }
                </ul>
            </Page>
        )
    }
}

多级吸顶示例

代码节选自：yis-demo/src/pages/components/sticky/index.js

<Page sticky scroller>
    <Sticky>
        <Header title="多级吸顶示例"/>
    </Sticky>
    <div>
        <div className={styles.container}></div>
        <Sticky offset={45}>
            <div className={styles.tab}>吸顶层级一</div>
        </Sticky>
        <div className={styles.container}></div>
        <div>
            <Sticky offset={75}>
                <div className={styles.tab}>吸顶层级二</div>
            </Sticky>
            <div className={styles.container}></div>
            <div>
                <Sticky offset={105}>
                    <div className={styles.tab}>吸顶层级三</div>
                </Sticky>
                <div className={styles.container}></div>
            </div>
        </div>
        // ...
    </div>
</Page>

说明

多级吸顶是模拟css规范sticky实现，offset 对应 top

Sticky 组件一般配合Page组件吸顶一起使用且唯一参数为 offset，默认值为 0

参数

参数名	类型	必选	默认值	描述
onResize	functon	×	无	webView事件
className	boolean	×	无	根节点类名
scroller	boolean	×	false	使用 scroller
loadMore	boolean	×	false	开启 loadMore
refresh	boolean	×	false	开启 refresh
sticky	boolean	×	false	子元素中含有 sticky
onLoadMore	functon	×	无	webView事件，上拉加载
onRefresh	functon	×	无	native原生事件，下拉刷新

Page 页面容器组件

示例

加载更多示例

单级吸顶示例

多级吸顶示例

说明

参数