1.微信小程序自定義底部菜單設(shè)計(jì)，并且固定在底部，并非tabBar設(shè)計(jì)

場景：比如加載詳情頁時(shí)：底部需要加入購物車、收藏、返回主頁等設(shè)計(jì)

效果圖：

點(diǎn)擊事件發(fā)生

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>

樣式設(shè)計(jì)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設(shè)計(jì)xx.js文章來源地址http://www.zghlxwxcb.cn/news/detail-558945.html

 handleImageTap: function(e) {
        const index = e.currentTarget.dataset.index; // 獲取當(dāng)前點(diǎn)擊的圖片的位置
        const isSelected = this.data['isSelected' + index]; // 獲取當(dāng)前點(diǎn)擊的圖片的選中狀態(tài)
        let newData = {}; // 定義一個(gè)新的數(shù)據(jù)對(duì)象
        if (isSelected) {
          newData['isSelected' + index] = false; // 如果當(dāng)前圖片已經(jīng)被選中，就將它的選中狀態(tài)設(shè)置為 false
        } else {
          for (let i = 1; i <= 3; i++) {
            if (i !== index && this.data['isSelected' + i]) { // 如果有其他圖片被選中，則將它的選中狀態(tài)還原
              newData['isSelected' + i] = false;
            }
          }
          newData['isSelected' + index] = true; // 將當(dāng)前點(diǎn)擊的圖片的選中狀態(tài)設(shè)置為 true
        }
        this.setData(newData); // 使用 setData 方法更新頁面數(shù)據(jù)
      },


  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',
              })  
          
    },
    //也可以設(shè)置在onShow()

到了這里，關(guān)于微信小程序自定義底部菜單設(shè)計(jì)，固定在底部，并非使用tabBar設(shè)計(jì)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！