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

这篇具有很好参考价值的文章主要介绍了微信小程序自定义底部菜单设计，固定在底部，并非使用tabBar设计。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

效果图：
微信小程序固定底部,微信小程序,javascript,小程序
点击事件发生

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文章来源地址https://www.toymoban.com/news/detail-558945.html

 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()