欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

2分钟教你实现环形/扇形菜单(基础版)

程序员文章站 2022-04-06 11:21:07
这篇文章主要介绍了2分钟教你实现环形/扇形菜单(基础版),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧... 20-01-15...

前言
 

项目需要用到环形菜单,初略在网上找了一下,没有找到合适的,于是自己写了一个很简单的,后续再优化。

这个组件是基于react,但是原理都一样。

展开效果如下:
 

2分钟教你实现环形/扇形菜单(基础版)

实现

css(less)

@centericonsize: 30px;

.flex(@justify: flex-start, @align: center) {
    justify-content: @justify;
    align-items: @align;
    display: flex;
}
.sector-menu-wrapper {
    position: relative;
    width: @centericonsize;
    margin: auto;

    .center-icon {
        .flex(center);
        width: @centericonsize;
        height: @centericonsize;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
        color: white;
        cursor: pointer;
    }

    .sector-item {
        position: absolute;
        .flex(center);
        width: @centericonsize;
        height: @centericonsize;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.3);
        cursor: pointer;
        color: white;
        top: 0;
        left: 0;
        transition: all linear 0.5s;
        transform: translate(0, 0);
        // display: none;
        visibility: hidden;
    }

    .sector-list {
        &.sector-list-active {
            transition: all linear 0.5s;
            .sector-item {
                .flex(center);
                transition: all linear 0.5s;
                transform: translate(0, 0);
                visibility: visible;

                &:first-child {
                    transform: translate(0, -@centericonsize * 1.5);
                }
        
                &:nth-child(2) {
                    transform: translate(-@centericonsize * 1.5, 0);
                }
        
                &:nth-child(3) {
                    transform: translate(0, @centericonsize * 1.5);
                    
                }
            }
        }
    }
}

sectormenu.js

import react from 'react';

export default class sectormenu extends react.component {
    state = {
        direction: 'left',
        sectormenuvisible: false,
        centericonsize: 30,
        sectoritemsize: 30,
    }

    /**
     * 显示环形菜单
     */
    showsectormenu = () => {
        const { sectormenuvisible } = this.state;
        this.setstate({
            sectormenuvisible: !sectormenuvisible,
        })
    }

    onclicksectormenuitem = (index) => {
        const { sectormenuitemfunctions } = this.props;
        if (!sectormenuitemfunctions || typeof(sectormenuitemfunctions[index]) !== 'function') {
            return;
        }
        sectormenuitemfunctions[index]();
    }

    getsectorjsx = () => {
        const { sectormenuitems } = this.props;

        if (!sectormenuitems || !array.isarray(sectormenuitems) || sectormenuitems.length === 0) {
            return;
        }

        const styles = {};
        const {  sectormenuvisible } = this.state;

        return sectormenuitems.map((item, i) => {
            // const styles = {
            //     transform: translate(0, -centericonsize * 2);
            // };

            return (<div
                classname={`sector-item ${sectormenuvisible && 'sector-item-active'}`}
                style={styles}
                onclick={() => this.onclicksectormenuitem(i)}
                key={i}
            >
                {item}
            </div>)
        });
    }
    render() {
        const { sectormenuvisible } = this.state;
        return (
            <div classname="sector-menu-wrapper">
                <div classname="center-icon" onclick={this.showsectormenu}>
                    {
                        sectormenuvisible ? 'x' : '···'
                    }
                </div>
                <div classname={`sector-list ${sectormenuvisible && 'sector-list-active'}`}>
                    {this.getsectorjsx()}
                </div>
            </div>
        )
    }
}

调用
 

<sectormenu
    sectormenuitems={['a1', 'a2', 'a3']}
    sectormenuitemfunctions={[function () {console.log(0)}, function () {console.log(1)}, function () {console.log(2)}]}
/>

期望
 

本来是想写成灵活分布,在怎么计算位置这里稍稍卡了一下,项目时间紧,改天抽空优化一下

  1. 灵活布局sectormenuitem
  2. 灵活展示sectormenu的位置(left,right, top, bottom...)

踩坑

过渡动画一直没有用,后来才知道是我在sector-item这个类里使用了display:none导致的,改用visibility属性就可以了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。