backtop

• 作者：hjingfen
• 邮箱：[email protected]
• 版本：0.2.0

介绍

组件描述内容

安装

lm-* 组件使用 npm 进行管理，命名空间统一为 lm-，请使用以下命令进行组件安装。

npm i lm-backtop --save

• 如果你还没有安装 npm，可通过以下方式进行 安装。
• 安装cnpm npm install -g cnpm --registry=https://registry.npm.taobao.org

使用

样例文档

• 待开发

使用

最少配置参数为：

render() {
    const lists = Array(60).fill(1).map((item, index) => <li key={index}>{index}</li>);//创建一个1-60的列表

    return (
        <div>
            <ul>{lists}</ul>
            <Backtop />     //调用Backtop
        </div>
    )
}

自定义"返回顶部"按钮的样式以及滚动高度

render() {
    const lists = Array(60).fill(1).map((item, index) => <li key={index}>{index}</li>);

    return (
        <div className="container">
            <ul>{lists}</ul>
            <Backtop customClass="custom-back-top" showHeight={300}>  //自定义样式
                <div className="custom-back-top-icon">UP</div>
            </Backtop>
        </div>
    )
}

只有页面局部可以滚动时的用法：

render() {
    const lists = Array(60).fill(1).map((item, index) => <li key={index}>{index}</li>);

    return (
        <div className="container">
            <h3>Lists</h3>
            <ul ref="target">{lists}</ul>      //标记滚动的dom(记得样式中设置body不可以滚动只有ul部分可以滚动)
            <Backtop target={() => this.refs.target} /> //通过target方法把滚动的dom传入
        </div>
    )
}

配置参数

| Prop | Type | Default | Description | | ---- |:----:|:-------:| :----------:| | showHeight | number | 170 | 当滚动高度超过此值时显示"返回顶部"按钮 | | className | string | undefined | 自定义样式 | | target | function | undefined | 执行方法返回页面滚动的dom节点,若是整个页面的滚动就不需要传入此参数 |

注意事项

• 组件注意事项

开发调试

进入项目目录后，使用 node 命令启动服务

npm run start

打包发布可通过 node 命令执行

npm run build
npm publish

相关资料

• lm 组件开发规范

Changelog

0.1.0

1. init

0.1.1

1. add throttle on handleScroll

0.1.2

1. replace customClass property with className

0.2.0

1. upgrade version to react-16