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