标签：const text Pro pos Ant state let Design dir

1. 添加组件代码

新增src/pages/Demo/components/Marquee.tsx
代码如下

import React, { PureComponent } from 'react';


/**
 * 参考
 * https://blog.csdn.net/adsfa23124/article/details/101769001
 * https://wenku.baidu.com/view/b70bbb0390c69ec3d5bb75b9.html
 * https://www.jb51.net/css/94991.html
*/
interface IMarqueeProps {
    fontSize?:number,
    bold?: boolean,
    color?:string,
    text?:string,
    state?:string,
};


class Marquee extends PureComponent<IMarqueeProps> {
    state = {
        pos: 0,
        float: 'right',
        dir: 'right',
    }

    interval : any;
    action = () => {
        this.interval = setInterval(() => {
        let marqueeElement = document.getElementById("marquee")
        if (marqueeElement === null) { return }

        let marquee = marqueeElement.getBoundingClientRect();
        let marqueePar = document.getElementById("marqueeParent")?.getBoundingClientRect()
        if (marquee === undefined || marqueePar === undefined) return;

        // let textWidth = parseFloat(window.getComputedStyle(marqueeElement).width);
        let dir = this.state.dir
        let pos = 0
        /* 判断边界 */
        if (marquee.x < marqueePar.x) { // 左边界
            dir = 'right'
        }else if (marqueePar.x + marqueePar.width  <= marquee.x){ // 右边界
            dir = 'left'
        }

        if  (this.state.dir == 'right'){
            pos = this.state.pos - 1
        }else{
            pos = this.state.pos + 1
        }
        this.setState({
            pos: pos,
            dir: dir
        })
        }, 10)  //定时器
    }

    componentWillUnmount = () => {
        if (this.interval) {
            clearInterval(this.interval);  
        }
    }

    start = () => {
        if (this.interval) {
            return 
        }
        this.action()
    }

    stop = () => {
        if (this.interval) {
            clearInterval(this.interval);
            this.interval = null
        }
    }

    render() {
        if (this.props.state == 'start') {
            this.start()
        } else if (this.props.state == 'stop') {
            this.stop()
        }

        return (
            <div id = 'marqueeParent'>
                <div id = 'marquee' style = 
                    {{ 
                        float: 'right',
                        position: 'relative', 
                        right: this.state.pos +'px',
                        fontSize: this.props.fontSize +'px',
                        fontWeight: this.props.bold? 'bold' : 'normal',
                        color: this.props.color
                    }}
                > { this.props.text } </div>
            </div>
        )
    }
}

export default Marquee;

2. 添加代码使用

添加到Demo页面

import { Card, Tabs, Input, Typography, Space, message, Button } from 'antd';
import styleObj from '../components/style'

import React from 'react';
import { useState } from 'react';
import { postData, getData } from '@/services/demo';
import Marquee from './components/Marquee'

const { Text } = Typography;
const { Search } = Input;


const DemoPage: React.FC = () => {
    const [currentKey, setCurrentKey] = useState("1");
    const [tabText1, setTabText1] = useState("Tab1");
    const [tabText2, setTabText2] = useState("Tab2");
    const [tabText3, setTabText3] = useState("Tab3");
    const [marqueeState, setMarqueeState] = useState('start');

    const handleOnChange = (key:string) => {
        console.log("handleOnChange: " + key);
        setCurrentKey(key);
    }

    const onStop = ()=>{
        setMarqueeState('stop');
    }

    const onStart = ()=>{
        setMarqueeState('start');
    }

    async function onSearch (text:string) {
        // console.log("Current Key: ", currentKey, ", On Search Text: ", text);
        
        let dat = { text: text };
        try {
            switch (currentKey){
                case '1': {
                    let result = await postData(dat);
                    setTabText1(result.data.text);
                    break;
                } 
                case '2': {
                    let result = await getData(dat);
                    setTabText2(result.data.text);
                    break;
                }
                case '3': {
                    let result = await postData(dat);
                    setTabText3(result.data.text);
                    break;
                }
                default: {break;}
            }
            message.success("successful");
          } catch (error) {
            // message.error("unknown error");
          }
          return;
    }


    return (
        <div className="site-card-border-less-wrapper">
        <Card title='demo_page' style={styleObj.CardStyle} headStyle =  {styleObj.HeadStyle}>
        <Tabs defaultActiveKey="1" activeKey={ currentKey } onChange={ handleOnChange }>
        <Tabs tab="Demo_Tab_1" key="1"/> 
        <Tabs tab="Demo_Tab_2" key="2"/>
        <Tabs tab="Demo_Tab_3" key="3"/>
        </Tabs>
        {
            currentKey === '1' && (
                <Space direction="vertical">
                    <Search placeholder="input search text1" onSearch={onSearch} enterButton />
                    <Text> { tabText1 } </Text>
                </Space>
            )
        }
        {
            currentKey === '2' && (
                <Space direction="vertical">
                    <Search placeholder="input search text2" onSearch={onSearch} enterButton />
                    <Text> { tabText2 } </Text>
                </Space>
            )
        }
        {
            currentKey === '3' && (
                <Space direction="vertical">
                    <Marquee text = "你好世界，1111" state = {marqueeState} bold = {true} fontSize = {80} />
                    <Button icon="start" onClick={onStart} > 开始 </Button>
                    <Button icon="pause" onClick={onStop} > 暂停 </Button>
                </Space>
                // <Space direction="vertical">
                //     <Search placeholder="input search text3" onSearch={onSearch} enterButton />
                //     <Text> { tabText3 } </Text>
                // </Space>
            )
        }
        </Card>
        </div>
    );
};

export default DemoPage;

3. 界面效果

标签：const,text,Pro,pos,Ant,state,let,Design,dir
来源： https://blog.csdn.net/halo_hsuh/article/details/120452834

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。