弹出效果
- 步骤一、index.js
- 步骤二、index.json
- 步骤三、index.wxml
- 步骤四、index.wxss
效果简述：恶搞的好玩点击效果，点击后展开
步骤一、index.js
Page({
data: {
isPlaying: true,
animationClass: 'music-icon',
show_menu: false, // 菜单是否激活
show_popup: false, // 弹框是否显示
popup_content: '', // 弹框内容
// 菜单列表
menu: [
{
icon: 'http://xxxx/organization.png', // 使用路径
name: '组局（组橘）'
},
{
icon: 'http://xxxx/calculator.png',
name: '算钱'
},
{
icon: 'http://xxxx/ball.png',
name: '精灵球'
},
{
icon: 'http://xxxx/competition.png',
name: '比赛'
},
{
icon: 'http://xxxx/eat.png',
name: '夜宵',
url: '/pages/supper/supper'
},
{
icon: 'ai.png',
name: 'AI'
},
],
currIndex: '', // 当前选中菜单索引，默认为空，无选中
menu_add: 'http://xxxx/sunbawang.png' // 中间点击图标
},
// 菜单点击事件
clickActive(e) {
let { index } = e.currentTarget.dataset;
if (this.data.currIndex === index || index === undefined) return;
this.setData({
currIndex: index,
show_popup: true,
popup_content: this.data.menu[index].name
});
},
// 点击按钮事件
showMenu() {
let { show_menu } = this.data;
this.setData({
show_menu: !show_menu,
currIndex: ''
});
},
// 隐藏弹框
hidePopup() {
this.setData({
show_popup: false
});
},
// 阻止事件冒泡
stopPropagation() {}
});
步骤二、index.json
{
"component": true,
"usingComponents": {
"navigation-bar": "/components/navigation-bar/navigation-bar"
},
"navigationBarTextStyle": "white",
"navigationBarBackgroundColor": "#ffc0cb",
"navigationBarTitleText": "圆形菜单弹出选中动画"
}
步骤三、index.wxml
<!-- pages/cssCase/circleMenu/index.wxml -->
<view class="container">
<view class="content"></view>
</view>
<view class="menu_container">
<view class="menu-box {{show_menu ? 'active' : ''}}">
<block wx:for="{{menu}}" wx:key="index" wx:for-item="item" wx:for-index="index">
<view class="menu-box-item {{currIndex === index ? 'active' : ''}}" style="--n:{{index}};--deg:{{360/menu.length}}deg" data-index="{{index}}" catchtap="clickActive">
<image class="icon" src="{{item.icon}}" style="--deg:{{-360/menu.length}}deg" />
</view>
</block>
<view class="menu-box-active" style="--n:{{currIndex}};--deg:{{360/menu.length}}deg"></view>
</view>
<view class="menu-add-box {{show_menu ? 'active' : ''}}" catchtap="showMenu">
<image class="icon" src="{{menu_add}}" />
</view>
</view>
<!-- 弹框 -->
<view class="popup {{show_popup ? 'show' : ''}}" catchtap="hidePopup">
<view class="popup-content" catchtap="stopPropagation">
<text>{{popup_content}}</text>
<!-- 这里可以添加更多的文字、图片等内容 -->
</view>
</view>
步骤四、index.wxss
/* pages/cssCase/circleMenu/index.wxss */
page {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
--active: orange; /* 选中菜单背景色 */
--bgcolor: rgb(185, 239, 247); /* 圆盘背景色 */
}
.container {
background-image: url('http://xxxx/active_bg.png');
background-size: cover;
height: 100vh;
width: 100vw;
position: relative;
}
.menu_container {
width: 400rpx;
height: 400rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.menu-box {
width: 100%;
height: 100%;
position: relative;
opacity: 0; /* 默认隐藏 */
transform: scale(0);
visibility: hidden;
transition: all .5s;
}
.menu-box::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: var(--bgcolor);
border-radius: 50%;
box-shadow: 0 0 8px var(--active); /* 添加投影 */
transform: translate3d(0, 0, 0); /* 解决ios圆角不生效 */
}
.menu-box.active {
transform: scale(1);
opacity: 1;
visibility: visible;
}
.menu-box-item {
width: 80rpx;
height: 80rpx;
position: absolute;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
top: calc(50% - 40rpx);
left: calc(50% - 40rpx);
transition: all .5s; /* 添加过渡效果 */
transform: rotate(calc(var(--deg) * var(--n))) translateX(-140rpx); /* 添加transform偏移 */
}
.menu-box-item .icon {
width: 80rpx;
height: 80rpx;
background-size: cover;
transition: all .5s; /* 添加过渡效果 */
transform: rotate(calc(var(--deg) * var(--n)));
}
.menu-box-item.active {
transform: rotate(calc(var(--deg) * var(--n))) translateX(-220rpx);
}
.menu-box-item.active .icon {
transform: rotate(calc(var(--deg) * var(--n)));
}
@keyframes scale {
100% {
transform: scale(1.9);
}
}
.menu-box-active {
position: absolute;
width: 100rpx;
height: 100rpx;
background-color: var(--active);
box-shadow: 0 0 0 10rpx var(--bgcolor);
border-radius: 50%;
pointer-events: none;
transition: all .5s;
transform-origin: center;
top: calc(50% - 50rpx);
left: calc(50% - 50rpx);
z-index: 1;
opacity: 0; /* 默认隐藏 */
visibility: hidden;
}
.menu-box-item.active ~ .menu-box-active {
opacity: 1;
visibility: visible;
transform: rotate(calc(var(--deg) * var(--n))) translateX(-220rpx);
}
.menu-add-box {
width: 120rpx;
height: 120rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
left: calc(50% - 60rpx);
top: calc(50% - 60rpx);
/* 霸王色 */
background-color: rgb(255, 255, 255);
transition: all .5s;
}
.menu-add-box::after {
content: '你想说的话';
position: absolute;
bottom: -38rpx;
font-size: 32rpx;
color: #222;
font-weight: bold;
transition: all .5s;
opacity: 1;
}
.menu-add-box .icon {
width: 56rpx;
height: 56rpx;
background-size: cover;
transform: scale(1.5);
}
.menu-add-box.active::after {
font-size: 0;
opacity: 0;
}
.menu-add-box.active .icon {
transform: rotate(135deg);
}
/* 弹框样式 */
.popup {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.popup.show {
opacity: 1;
visibility: visible;
}
.popup-content {
background-color: rgba(255, 255, 255, 0.8);
border-radius: 8px;
padding: 20px;
max-width: 90%;
text-align: center;
width: 700rpx;
height: 1000rpx;
}
