前言
&nbs p;
项目需要用到环形菜单,初略在网上找了一下,没有找到合适的,于是自己写了一个很 简单 的,后续再优化。
这个组件是基于react,但是原理都一样。
展开效果如下:
实现
css(less)
@ center Icon Size: 30px; .flex(@justify: flex -s tart, @align: center) { justify-content: @justify; align -i tems: @align; dis play : flex; } .sector-menu-wrap PE r { pos IT ion: relative; width: @centerIconSize; m arg in: auto; .center-icon { .flex(center); width: @centerIconSize; h ei ght: @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 { & am p;.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 { stat e = { direction: 'left', sectorMenuVisible: false, centerIconSize: 30, sectorItemSize: 30, } /** * 显示环形菜单 */ showSectorMenu = () => { const { sectorMenuVisible } = this.state; this.setState({ sectorMenuVisible: !sectorMenuVisible, }) } onClickSectorMenuItem = (index) => { const { sectorMenuItemFunctions } = this. PR ops; 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属性就可以了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
总结
以上是 为你收集整理的 2分钟教你实现环形/扇形菜单(基础版) 全部内容,希望文章能够帮你解决 2分钟教你实现环形/扇形菜单(基础版) 所遇到的问题。
如果觉得 网站内容还不错, 推荐好友。
查看更多关于2分钟教你实现环形/扇形菜单(基础版)的详细内容...
声明:本文来自网络,不代表【好得很程序员自学网】立场,转载请注明出处:http://haodehen.cn/did200965