一直没有下决心将自己的笔记分享出来，大概是出于内心的不自信，想开之后，发现很多事纯属自作多情。
这是我第一篇分享，所以本着吹牛皮不负责的态度，先立下flag：
-
1.30岁能有实力实现自由职业，有能力坚持自己的代码生涯，做出自己的产品。
-
2.一定要去大厂看看
好了，开始吧。
今天主要是分享一个自模拟的微信小程序底部导航栏，没有很大的技术难度，各位看客喜欢也拿去玩玩，有什么改进的地方，欢迎交流。
wxml
<view >
<view class='com-tabbar'>
<view bindtap='handleSwitchRouter' data-url='{{item.pagePath}}' class='com-tabbar-item {{item.active?"com-tabbar-item_active":""}}' wx:for="{{tabbarConfig}}" wx:key="item.pagePath">
<image class='com-tabbar-icon' src='{{item.active?item.selectedIconPath:item.iconPath}}'></image>
<view class='com-tabbar-text'>{{item.text}}</view>
</view>
</view>
</view>
wxss
.com-tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 50px;
overflow: hidden;
display: flex;
border-top: 1px solid #eee;
}
.com-tabbar-item {
flex: 1;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #333;
}
.com-tabbar-icon {
width: 28px;
height: 28px;
}
.com-tabbar-icon-super{
width: 36px;
height: 36px;
}
.com-tabbar-text{
margin-top: 4px;
font-size: 10px;
line-height: 10px;
}
.com-tabbar-item_active{
color: #fdb975;
}
js
const app = getApp();
Component({
/**
* 组件的属性列表
*/
properties: {
isHideTabbar:{
type: Boolean,
value: false
},
tabbarConfig: {
type: Array,
value: []
}
},
/**
* 组件的初始数据
*/
data: {
},
attached:function(){
// this
// debugger
},
/**
* 组件的方法列表
*/
methods: {
handleSwitchRouter(event) {
// debugger
let path = event.currentTarget.dataset.url
app.globalData.tabbarConfig.forEach((item) => {
// debugger
item.active = item.pagePath === path ? true : false
})
app.globalData.tabbarConfig
debugger
wx.navigateTo({
url: path,
})
}
}
})
使用
"usingComponents": {
"navBar": "../components/com_tabbar/com_tabbar"
}
<navBar isHideTabbar='{{isHideTabbar}}' tabbarConfig="{{tabbarConfig}}"/>
