Affix 固钉

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @alifd/next@latest -S

Guide

何时使用

当用户需要将某个组件固定在页面的某个位置时，可以使用 Affix 组件进行固定。

API

Affix

代码示例

基本

默认情况下，Affix 的默认目标容器元素是整个 window，并且 offsetTop = 0，也就意味着当页面往下滚动时，当 Affix 元素接触到浏览器边框时，此时会将 Affix 钉住。

查看源码在线预览

import { Affix, Button } from '@alifd/next';
ReactDOM.render(<div className="custom-affix-wrapper">
    <Affix>
        <Button type="secondary">Affixed Button</Button>
    </Affix>
</div>, mountNode);

.custom-affix-wrapper {
    padding: 40px 0;
}

自定义偏移量

可以通过 offsetTop 或 offsetBottom 自定义偏移量。

查看源码在线预览

import { Affix, Button } from '@alifd/next';
ReactDOM.render(<div className="custom-affix-wrapper">
    <Affix offsetBottom={0}>
        <Button type="secondary">Affixed Button</Button>
    </Affix>
</div>, mountNode);

.custom-affix-wrapper {
    padding: 40px 0;
}

自定义目标容器

可以通过 container 属性设置 Affix 组件需要监听其滚动事件的元素，该属性接收一个函数作为参数，默认为 () => window。

查看源码在线预览

import { Affix, Button } from '@alifd/next';
class Demo extends React.Component {
    _containerRefHandler(ref) {
        this.container = ref;
    }
    render() {
        return (
            <div className="custom-affix-container" ref={this._containerRefHandler.bind(this)}>
                <div className="affix-wrapper">
                    <Affix container={() => this.container} offsetTop={0}>
                        <Button type="secondary">Affixed Button</Button>
                    </Affix>
                </div>
            </div>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

.custom-affix-container {
    height: 150px;
    overflow-y: scroll;
    background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;
}
.custom-affix-container .affix-wrapper {
    padding-top: 50px;
    height: 500px;
}

启用绝对布局

可以通过 container 属性设置 Affix 组件需要监听其滚动事件的元素，该属性接收一个函数作为参数，默认为 () => window；设置 useAbsolute 为 true，通过 absolute 布局实现组件固定。

查看源码在线预览

import { Affix, Button } from '@alifd/next';
class Demo extends React.Component {
    _containerRefHandler(ref) {
        this.container = ref;
    }
    render() {
        return (
            <div className="custom-affix-container" ref={this._containerRefHandler.bind(this)}>
                <div className="affix-wrapper">
                    <Affix container={() => this.container} offsetTop={0} useAbsolute>
                        <Button type="secondary">Affixed Button</Button>
                    </Affix>
                </div>
            </div>
        );
    }
}
ReactDOM.render(<Demo />, mountNode);

.custom-affix-container {
    height: 150px;
    overflow-y: scroll;
    background: url(https://img.alicdn.com/tfs/TB1AbJXSpXXXXXJXpXXXXXXXXXX-32-32.jpg) repeat 50% 50%;
}
.custom-affix-container .affix-wrapper {
    padding-top: 100px;
    height: 500px;
}

onAffix

可以通过传入 onAffix 的事件回调函数来监听元素是否发生了固钉状态。该函数会在状态变化时返回固钉状态。

查看源码在线预览

import { Affix, Button } from '@alifd/next';
class Demo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            affixed: false
        };
    }
    onAffix = (affixed) => {
        this.setState({
            affixed
        });
    }
    render() {
        const state = this.state;
        return (<div className="affix-demo-wrapper">
            <Affix onAffix={this.onAffix}>
                <Button type="secondary">{state.affixed ? 'Affixed Button' : 'Unaffixed Button'}</Button>
            </Affix>
        </div>);
    }
}
ReactDOM.render(<Demo />, mountNode);

.affix-demo-wrapper {
    padding: 40px 0;
}

相关区块

暂无相关区块