El subprograma WeChat personaliza el diseño del menú inferior, fijo en la parte inferior, sin usar el diseño de la barra de pestañas

1. El applet de WeChat personaliza el diseño del menú inferior y lo arregla en la parte inferior, no en el diseño de la barra de pestañas.

Escenario: por ejemplo, al cargar la página de detalles: la parte inferior debe agregarse al carrito de compras, marcar, volver a la página de inicio, etc.

Imagen de efecto:

se produce un evento de clic

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>

diseño de estilo 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 diseño 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()