微信小程序自定义底部菜单设计，固定在底部，并非使用tabBar设计

1.微信小程序自定义底部菜单设计，并且固定在底部，并非tabBar设计

场景：比如加载详情页时：底部需要加入购物车、收藏、返回主页等设计

效果图：

点击事件发生

xx.wxml

<view class="menu">
    <view class="menu-item" bindtap="goindex">
        <image src="{
     
     {isSelected1 ? selectedImageUrl1 : imageUrl1}}" bindtap="handleImageTap" data-index="1" data-selected="{
     
     {isSelected1}}"  />

        <text>返回首页</text>
    </view>
    <view class="menu-item">
        <image src="{
     
     {isSelected2 ? selectedImageUrl2 : imageUrl2}}" bindtap="handleImageTap" data-index="2" data-selected="{
     
     {isSelected2}}" />

        <text>收藏</text>
    </view>
    <view class="menu-item">
        <image src="{
     
     {isSelected3 ? selectedImageUrl3 : imageUrl3}}" bindtap="handleImageTap" data-index="3" data-selected="{
     
     {isSelected3}}" />
        <text>加入购物车</text>
    </view>
</view>

样式设计xx.wxss

 .menu{
    
    
      width: 100%;
      height: 140rpx;
      background-color: #fff;
      border-top-left-radius: 70rpx;
      border-top-right-radius: 70rpx;
      box-shadow: 0px -2px 10px 4px rgba(0, 0, 0,0.05);
      display: flex;
      align-items: center;
      justify-content: space-around;
      position: fixed;
      bottom: 0;
  }
  .menu-item{
    
    
      display: flex;
      flex-direction: column;
      font-size: 10px;
      text-align: center;
      counter-reset: #b2b3b6;
      align-items: center;

  }

  .menu-item image{
    
    
    
    width: 50rpx;
    height: 50rpx;
    margin-bottom: 10rpx;
    
  }

js设计xx.js

 handleImageTap: function(e) {
    
    
        const index = e.currentTarget.dataset.index; // 获取当前点击的图片的位置
        const isSelected = this.data['isSelected' + index]; // 获取当前点击的图片的选中状态
        let newData = {
    
    }; // 定义一个新的数据对象
        if (isSelected) {
    
    
          newData['isSelected' + index] = false; // 如果当前图片已经被选中，就将它的选中状态设置为 false
        } else {
    
    
          for (let i = 1; i <= 3; i++) {
    
    
            if (i !== index && this.data['isSelected' + i]) {
    
     // 如果有其他图片被选中，则将它的选中状态还原
              newData['isSelected' + i] = false;
            }
          }
          newData['isSelected' + index] = true; // 将当前点击的图片的选中状态设置为 true
        }
        this.setData(newData); // 使用 setData 方法更新页面数据
      },


  onLoad(options) {
    
    

            this.setData({
    
    
                imageUrl1: '../../../img/indexImg/my.png',
                selectedImageUrl1: '../../../img/indexImg/myactive.png',
                imageUrl2: '../../../img/indexImg/quick.png',
                selectedImageUrl2: '../../../img/indexImg/quickactive.png',
                imageUrl3: '../../../img/indexImg/shopping.png',
                selectedImageUrl3: '../../../img/indexImg/shoppingactive.png',
              })  
          
    },
    //也可以设置在onShow()