由于公司需求，每每总是设计出个性化的内容，设计为凸显美观，但作为开发，就要考虑性能。
今天要记录一款小程序自定义导航，由于官方原本的导航直接在app.json里配置就可以了，如果自己写，总是会有那么一点不完美。
经过多方查阅资料，终于搞定了一款还算完美的自定义导航。
在此，记下，同时也分享给有需要的小程序猿们。
主要文件的目录结构如下：
├── components
│ └── custom-tabbar
│ ├── custom-tabbar.js
│ ├── custom-tabbar.json
│ ├── custom-tabbar.wxml
│ ├── custom-tabbar.wxss
│ └── tabbar-config.js
├── images
├── pages
│ ├── add
│ │ ├── add.js
│ │ ├── add.json
│ │ ├── add.wxml
│ │ └── add.wxss
│ ├── index
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ ├── news
│ │ ├── news.js
│ │ ├── news.json
│ │ ├── news.wxml
│ │ └── news.wxss
│ ├── shop
│ │ ├── shop.js
│ │ ├── shop.json
│ │ ├── shop.wxml
│ │ └── shop.wxss
│ └── user
│ ├── user.js
│ ├── user.json
│ ├── user.wxml
│ └── user.wxss
├── app.js
├── app.json
├── app.wxss
app.json
首先在app.json设置好固定底部导航的路径
tab的背景色和border均设置为白色，避免打开小程序闪出来的官方tab
自定义组建里有两个js文件 配置好需求路径及icon图和显示文字
tabbar-config.js
module.exports={
tabStyle:{
activeColor:'#FE494C',//触发时文字颜色
inactiveColor:'#353535',//未触发时文字的颜色
},
tabs:[
{
"content":"首页",//显示的文字
"activeImg":"/images/index-s.png",//触发时的图片
"inactiveImg":"/images/index.png",//未触发的图片
"path":"/pages/index/index"//按钮对应的路径
},
{
"content": "消息",
"activeImg": "/images/news-s.png",
"inactiveImg": "/images/news.png",
"path": "/pages/news/news"
},
{
"content": "",
"activeImg": "",
"inactiveImg": "",
"path": "/pages/add/add"
},
{
"content": "购物车",
"activeImg": "/images/car-s.png",
"inactiveImg": "/images/car.png",
"path": "/pages/shop/shop"
},
{
"content": "我的",
"activeImg": "/images/user-s.png",
"inactiveImg": "/images/user.png",
"path": "/pages/user/user"
}
]
}
custom-tabbar.js组建js文件
const config = require('./tabbar-config.js')
Component({
properties:{
activeIndex:{
type:Number,
value:0
}
},
data:{
data:config
},
created() {
//进入页面时需要隐藏掉原有的tabbar
wx.hideTabBar({ aniamtion: false })
},
methods:{
//点击tag
clickTag(e){
let index = e.currentTarget.dataset.index;
this.changeTag(index)
},
bindMiddleTab:function(){
this.changeTag(2)
},
//tag方法
changeTag(index){
//如果点击当前所在的项，不会跳转
if(index == this.data.activeIndex){
return false;
}
let pagePath = this.data.data.tabs[index].path;
// 如果点击的为中间按钮则使用navigator方式跳转 其他页面使用switch
if(index == 2){
wx.navigateTo({
url: pagePath,
})
}else{
wx.switchTab({
url: pagePath
})
}
}
}
})
custom-tabbar.wxml
<view class="tabbar-wrap">
<view class='tabbar-item' wx:for='{{data.tabs}}' wx:key='' bindtap='clickTag' data-index='{{index}}'>
<image src="{{index == activeIndex?item.activeImg:item.inactiveImg}}" wx:if='{{item.activeImg}}' ></image>
<view wx:if="{{item.content}}" style='color:{{index == activeIndex?data.tabStyle.activeColor:data.tabStyle.inactiveColor}}'>{{item.content}}</view>
</view>
<view class='tabbar-middle' bindtap='bindMiddleTab'>
<image src='../../images/add.png' class='middle-img tab-animated'></image>
</view>
</view>
custom-tabbar.wxss
.tabbar-wrap{height:98rpx;background:#fff;width:100%;display:flex;position:fixed;bottom:0;box-shadow:0 -1rpx 10rpx rgba(0,0,0,.1)}
.tabbar-item{flex:1;height:96rpx;position:relative;font-size:18rpx;font-family:PingFangSC-Medium;display:flex;flex-direction: column;align-items: center;}
/* tabbar-image */
.tabbar-item image{width:54rpx;height:54rpx;display:block;margin-top:12rpx;}
.tabbar-middle{position:absolute;left:320rpx;width:110rpx;height:110rpx;top:-40%;background:#fff;border-radius:50%;box-shadow:0 2rpx 10rpx rgba(0,0,0,.2)}
.middle-img{width:102rpx;height:102rpx;display:block;margin:6rpx auto 0 auto;}
分别在对应路径的写入引入 改组建并且传入对应的activeIndex就可以啦
如果中间按钮不需要再显示底部按钮，且为navigator的跳转方式，则不需要写入，按需调整
<custom-tabbar activeIndex='0'></custom-tabbar>
虽然实现方法，已经OK，但还是有一个缺点，第一次进来点击tab的时候 会发生闪烁。不过已经近乎完美了。文末附上代码，有需要的可以自行下载。
网友评论