微信小程序【四】好玩的点击展开弹框功能

效果简述：恶搞的好玩点击效果，点击后展开

一、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/center_icon.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;
  }