react-app-shell/activity/src/views/bargain/component/introduceTabs.js

react打包脚本和example, 这里的版本请忽略

import React, {Component} from 'react';
import {observer, inject} from 'mobx-react';
import classNames from 'classnames';

import VideoPlayer from './videoPlay';
import {BARGAIN_TYPE} from '../../../constants';
import styles from './introduceTabs.less';

/**
 * 产品介绍及活动规则
 */
@inject(({bargainStore}) => {
    return {
        activeType: bargainStore.state.activeType,
        ruleImgs: bargainStore.activeInfo.ruleImgs || [], // 规则图片
        descImg: bargainStore.activeInfo.descImg || [], // 产品介绍图片
        videos: bargainStore.activeInfo.videos || [], // 视频
    };
})

@observer
class IntroduceTabs extends Component {

    state = {
        active: 'product',
        fixedMenu: false,   //  是否吸顶
    };

    componentDidMount() {
        window.addEventListener('scroll', this.handleScroll);
    }

    componentWillUnmount() {
        window.removeEventListener('scroll', this.handleScroll);
    }

    /**
     * @description 滚动条事件
     * @return {boolean}
     */
    handleScroll = () => {
        let ruleTop = this.refs.rule.offsetTop - window.pageYOffset;
        let introduceTop = this.refs.introduce.offsetTop - window.pageYOffset;

        let {fixedMenu, active} = this.state;
        fixedMenu = introduceTop < 10;
        if (ruleTop < 100) {
            active = 'rule';
        } else {
            active = 'product';
        }

        this.setState(() => ({
            fixedMenu,
            active
        }));
    };

    /**
     * 选项卡点击事件
     */
    handleTak = value => {
        let productTop = this.refs.product.offsetTop;
        const contentHeight = this.refs.introduce.offsetHeight;
        let ruleTop = this.refs.rule.offsetTop;
        this.setState(state => ({
            fixedMenu: contentHeight > window.innerHeight ? true : state.fixedMenu,
            active: value
        }));
        switch (value) {
            case 'product': {
                this.move(productTop);
                break;
            }
            case 'rule': {
                this.move(ruleTop);
                break;
            }
        }
    };


    move = iTarget => {
        window.scrollTo(0, iTarget);
    };


    render() {
        let {active, fixedMenu} = this.state;
        const {ruleImgs, descImg, videos, activeType} = this.props;
        return (
            <div className={styles['introduce-wrapper']} ref="introduce">
                <div className={styles['details']}>
                    <div className={styles['dt-content']}>
                        <div className={fixedMenu ? styles['fixedMenu'] : styles['dt-title']} >
                            <a
                                className={active === 'product' ? styles['active'] : ''}
                                onClick={this.handleTak.bind(this, 'product')}>
                                {activeType === BARGAIN_TYPE.BARGAIN_ACTIVITY_TRAINING_CAMP ? '训练营介绍' : '礼包介绍'}
                            </a>
                            <a
                                className={active === 'rule' ? styles['active'] : ''}
                                onClick={this.handleTak.bind(this, 'rule')}>
                                活动规则
                            </a>
                        </div>
                        <div className={classNames({
                            [styles['dt-wrapper']]: fixedMenu
                        })}
                        />
                        <div>
                            <div ref="product" className={styles['dt-product']}>
                                {videos.map((item, index) => {
                                    return (
                                        <VideoPlayer videoData={item} key={index}/>
                                    );
                                })}
                                {descImg.map((item, index) => {
                                    return (
                                        <img
                                            src={item}
                                            alt="产品介绍"
                                            key={index}
                                        />
                                    );
                                })}
                            </div>
                            <div ref="rule" className={styles['dt-rule']}>
                                {ruleImgs.map((item, index) => {
                                    return (
                                        <img
                                            src={item}
                                            alt="规则介绍"
                                            key={index}
                                        />
                                    );
                                })}
                            </div>
                            <div className={styles['bargain-remark']}>
                                <p>*本活动最终解释权归魔力耳朵所有</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default IntroduceTabs;