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, }) }, /** * 生命周期函数--监听页面加载 */ onLoad: 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, }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { }, /** * 生命周期函数--监听页面显示 */ onShow: function () { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function () { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function () { }, /** * 用户点击右上角分享 */ onShareAppMessage: function () { } })
7、总结
tab按钮主要是利用了fixed（固定定位）布局来固定按钮的样式，tab页面切换的js代码逻辑其实并不难。
8、后话
如果在项目中会经常需要自定义tab页的话，我们还可以考虑将其封装成一个组件，详情查看：
https://blog.csdn.net/Twinkle_sone/article/details/113994621?spm=1001.2014.3001.5502
