navBar.wxml
<!-- 底部导航条 -->
<view class="navBar">
<view class="navBar-home" bindtap=‘goHome‘>
<image wx:if="{{homeActive}}" src="../../public/index_tabBar1.png"></image>
<image wx:if="{{!homeActive}}" src="../../public/index_tabBar1_nor.png"></image>
<text>首页</text>
</view>
<view class="navBar-explore" bindtap=‘goExplore‘>
<image wx:if="{{exploreActive}}" src="../../public/index_tabBar2.png"></image>
<image wx:if="{{!exploreActive}}" src="../../public/index_tabBar2_nor.png"></image>
<text>发现</text>
</view>
<view class="navBar-user" bindtap=‘goUser‘>
<image wx:if="{{userActive}}" src="../../public/index_tabBar3.png"></image>
<image wx:if="{{!userActive}}" src="../../public/index_tabBar3_nor.png"></image>
<text>我的</text>
</view>
</view>
navBar.wxss
/* 底部导航条 */
.navBar {
width: 100%;
padding: 18rpx 0;
border-top: 1rpx solid #cccccc;
display: flex;
justify-content: space-around;
position: fixed;
bottom: 0;
background: #fff;
}
.navBar image {
width: 55rpx;
height: 55rpx;
}
.navBar view {
display: flex;
flex-direction: column;
align-items: center;
font-size: 20rpx;
color: #999999;
}
.navBar-user text {
color: #d0a763;
}
navBar.js
// pages/componentNavBar/navBar.js
Component({
/**
* 组件的属性列表
*/
properties: {
homeActive: {
type: Boolean,
value: false
},
exploreActive: {
type: Boolean,
value: false
},
userActive: {
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
// 返回首页
goHome: function (e) {
wx.switchTab({
url: ‘../index/index‘,
})
},
// 返回发现页
goExplore: function (e) {
wx.switchTab({
url: ‘../explore/explore‘,
})
},
// 返回我的页面
goUser: function (e) {
wx.switchTab({
url: ‘../user/user‘,
})
},
showCode: function(e) {
console.log(e);
let that = this;
console.log(that.data);
}
}
})
navBar.json
{
"component": true,
"usingComponents": {}
}
父组件 .wxml
<view>
<navBar userActive="{{userActive}}"></navBar>
</view>
父组件 .json
{
"usingComponents": {
"navBar": "../componentNavBar/navBar"
}
}
父组件 .js
data: {
userActive: true
},