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

前言

 

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

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

展开效果如下：
 

实现

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)}]}/>

期望

 

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

灵活布局sectorMenuItem 灵活展示SectorMenu的位置（left,right, top, bottom...）

踩坑

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

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