黑松山资源网 Design By www.paidiu.com
前言
项目需要用到环形菜单,初略在网上找了一下,没有找到合适的,于是自己写了一个很简单的,后续再优化。
这个组件是基于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属性就可以了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
黑松山资源网 Design By www.paidiu.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
黑松山资源网 Design By www.paidiu.com
暂无评论...
更新日志
2024年09月20日
2024年09月20日
- 战锤40K星际战士2狙击职业介绍|狙击职业技能效果一览
- RobertSaxtonTheResurrectionoftheSoldiers(2024)[24Bit-192kHz]FLAC
- 唐成杨东哥弹唱《情若真HQ》头版限量编号[WAV+CUE]
- 柏菲·HIFI风情1《一杯香茶》限量开盘母带ORMCD[WAV+CUE]
- 发糖了!《黑神话》动画导演绘制八戒紫蛛儿中秋贺图
- “时光系列”新作《时光3:永耀之境》首曝:画风更真实的恋爱模拟RPG
- 《战地》游戏主管:始终认为《战地》未来销量能超越《使命召唤》
- 《伤感民谣 值得收藏的音乐极品 2CD》[WAV/分轨][1.2GB]
- 《邓紫棋 巨肺唱将小天后有心人 2CD》[WAV/分轨][1.2GB]
- 《迪克牛仔 坛奇精选 2CD台首版》 [WAV+CUE][600MB]
- 陈明.1998-为了爱影视歌曲+新歌【中唱】【WAV+CUE】
- 黄小琥.2009-简单/不简单【华纳】【WAV+CUE】
- 洪卓立.2010-TASTE.OF.LOVE新曲+精丫英皇娱乐】【WAV+CUE】
- 战锤40K星际战士2职业强度排行
- 交错战线PVE国家队成员以及常用角色推荐