微信小程序自定义底部tabBar按钮

2023-07-21 22:26:58

1、wxml页面代码

<!-- --------------------------tab页--------------------------- -->
<!-- 通过tabind来控制页面的显示和隐藏 -->
<view wx:if="{{tabind == 0}}">
  page0
</view>
<view wx:if="{{tabind == 1}}">
  page1
</view>
<view wx:if="{{tabind == 2}}">
  page2
</view>
<!-- --------------------------tab页--------------------------- -->

<!-- --------------------------底部按钮--------------------------- -->
<view class="tabBar">
  <view class="tabBar-item" bindtap="changeTab" data-id="0">
    <view>
        <image wx:if="{{tabind != 0}}" class="tabBar-icon" src='cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png'>
        </image>
        <image wx:if="{{tabind == 0}}" class="tabBar-icon" src='cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png'>
        </image>
    </view>
    <view class="" bindtap="changeTab" data-id="0" style="color:{{tabind == 0 ? 'blue' : 'grey'}};">页面0</view>
  </view>
  <view class="tabBar-item" bindtap="changeTab" data-id="1">
    <view>
      <image wx:if="{{tabind != 1}}" class="tabBar-icon" src='cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png'>
      </image>
      <image wx:if="{{tabind == 1}}" class="tabBar-icon" src='cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png'>
      </image>
    </view>
    <view class="" bindtap="changeTab" data-id="1" style="color:{{tabind == 1 ? 'blue' : 'grey'}};">页面1</view>
  </view>
  <view class="tabBar-item" bindtap="changeTab" data-id="2">
    <view>
      <image wx:if="{{tabind != 2}}" class="tabBar-icon" src='cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png'>
      </image>
      <image wx:if="{{tabind == 2}}" class="tabBar-icon" src='cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png'>
      </image>
    </view>
    <view class="" bindtap="changeTab" data-id="2" style="color:{{tabind == 2 ? 'blue' : 'grey'}};">页面2</view>
  </view>
</view>
<!-- --------------------------底部按钮--------------------------- -->

2、wxss样式代码

/* 按钮图片样式 */
.tabBar-icon{
  width:54rpx;
  height: 54rpx;
}
/* 按钮栏的整体样式 */
.tabBar{
  width:100%;
      /*
        fixed（固定定位）：生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", 		"right" 以及 "bottom" 属性进行规定。可通过z-index进行层次分级。
      */
  position: fixed;
    /* 固定在底部 */
  bottom:0;
  padding:10rpx;
  margin-left:-4rpx;
  background:pink;
  font-size:24rpx;
  color:#8A8A8A;
  box-shadow: 3rpx 3rpx 3rpx 3rpx #aaa; 
  z-index: 9999;
    /*子元素弹性布局*/
  display: flex;
}
/* 每个按钮的样式 */
 .tabBar-item{
  float:left;
  width: 100%;
  text-align: center;
  overflow: hidden;
}

3、js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabind:0 //当前选中页面下标
  },
//切换tab页
changeTab(e){
    //获取dataset-id的值
    let ind = e.currentTarget.dataset.id;
    this.setData({
      tabind:ind,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

4、不足

以上代码可以实现自定义tab页的基本需求，但是可以看到wxml页面上的代码过于冗余，重复代码多，不易于后期阅读维护，对此，我们可以做以下改动：

我们可以在js页面中进行对tab按钮的数据维护，然后在wxml页面中用循环将按钮组渲染出来。

5、wxml页面代码

<view wx:if="{{tabind == 0}}">
  page0
</view>
<view wx:if="{{tabind == 1}}">
  page1
</view>
<view wx:if="{{tabind == 2}}">
  page2
</view>

<!-- --------------------------底部按钮--------------------------- -->
<view class="tabBar">
  <block wx:for="{{tabinf}}" wx:key="index" >
    <view class="tabBar-item" bindtap="changeTab" data-id="{{item.id}}">
      <view>
          <image wx:if="{{tabind != item.id}}" class="tabBar-icon" src='{{item.img}}'>
          </image>
          <image wx:if="{{tabind == item.id}}" class="tabBar-icon" src='{{item.img1}}'>
          </image>
      </view>
      <view class="" bindtap="changeTab" data-id="{{item.id}}" style="color:{{tabind == item.id ? 'blue' : 'grey'}};">{{item.title}}</view>
    </view>
  </block>
</view>
<!-- --------------------------底部按钮--------------------------- -->

6、js代码

Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabind:0,
    //按钮组信息
    tabinf:[
        {
            img:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png',
            img1:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png',
            id:0,
            title:'页面0'
        },
        {
            img:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png',
            img1:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png',
            id:1,
            title:'页面1'
        },
        {
            img:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记.png',
            img1:'cloud://it-cloud-hdrd7.6974-it-cloud-hdrd7-1300036058/记账本/标记1.png',
            id:2,
            title:'页面2'
        }
    ]
  },
//切换tab页
changeTab(e){
    let ind = e.currentTarget.dataset.id;
    this.setData({
      tabind:ind,
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onl oad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

7、总结

tab按钮主要是利用了fixed（固定定位）布局来固定按钮的样式，tab页面切换的js代码逻辑其实并不难。

8、后话

如果在项目中会经常需要自定义tab页的话，我们还可以考虑将其封装成一个组件。

码农公寓