小程序开发日志-8、微信小程序自定义底部导航栏组件+跳转（已废弃）

新佩方圆 發表於 2019-6-11 20:24:00

小程序开发日志-8、微信小程序自定义底部导航栏组件+跳转（已废弃）

微信小程序本来封装有底部导航栏，但对于想自定义样式和方法的开发者来说，这并不是很好。
参考链接：https://github.com/ljybill/miniprogram-utils/tree/master/custom-tabbar
首先创建一个底部导航栏组件，名为：navBar
<div class="cnblogs_code">
<pre><view class='tabbar'>
<view wx:if='{{_auth >= item.auth}}' class='tabbar-item' wx:for='{{tabbarList}}' wx:key='{{item.pagePath}}' bindtap='handleItemTap' data-path='{{item.pagePath}}' data-idx='{{index}}'>
<view class='tabbar-item-icon'>
 <image src='{{activeIdx === index ? item.selectedIconPath : item.iconPath}}'></image>
</view>
<view class='tabbar-item-text {{activeIdx === index ? "active" : ""}}'>{{item.text}}</view>
</view>
</view></pre>
</div>
导航栏样式，分为5个按钮，中间为圆形凸起
<div class="cnblogs_code">
<pre>.tabbar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
border-top: 0.5px solid #d5d5d5;
display: flex;
font-size: 0;
background: #fff;
}
.tabbar-item {
flex: 1;
text-align: center;
overflow: hidden;
box-sizing: border-box;
padding: 8rpx 10rpx 0;
color: #333333;
}

.tabbar-item:nth-child(3){
position: relative;
bottom: 50rpx;
height:150rpx;
flex: 0.7;
}

.tabbar-item:nth-child(3) .tabbar-item-icon{
height: 100rpx;
background: #fff;
border-radius: 50%;
border-top: solid 1px gray;
}

.tabbar-item:nth-child(3) .tabbar-item-icon image{
width: 100rpx;
height: 106rpx;
padding-top: 6rpx;
}

.tabbar-item:nth-child(3) .tabbar-item-text{
line-height: 0;
font-size: 28rpx;
margin-top: 8px;
color: #808080;
}

.tabbar-item-icon {
margin-bottom: 6rpx;
height: 56rpx;
}

.tabbar-item-icon image {
width: 56rpx;
height: 56rpx;
}

.tabbar-item-text {
font-size: 28rpx;
line-height: 20rpx;
color: #808080;
}
.active {
color: #23ac38;
}</pre>
</div>
接下来在app.json中配置导航跳转，由于关于项目，路径自己写
<div class="cnblogs_code">
<pre>"tabBar": {
"color": "white",
"borderStyle": "white",
"backgroundColor": "white",
"list": [
 {
 "pagePath": "跳转路径",
 "text": "首页",
 "iconPath": "zh_tcwq/image/home.png",
 "selectedIconPath": "zh_tcwq/image/home_selected.png",
 "auth": 0
 },
 {
 "pagePath": "跳转路径",
 "text": "行业社区",
 "iconPath": "zh_tcwq/image/community.png",
 "selectedIconPath": "zh_tcwq/image/community_selected.png",
 "auth": 0
 },
 {
 "pagePath": "跳转路径",
 "text": "发现",
 "iconPath": "zh_tcwq/image/xbz_logo.png",
 "selectedIconPath": "zh_tcwq/image/close.png",
 "auth": 0
 },
 {
 "pagePath": "跳转路径",
 "text": "项目对接",
 "iconPath": "zh_tcwq/image/docking.png",
 "selectedIconPath": "zh_tcwq/image/docking_selected.png",
 "auth": 0
 },
 {
 "pagePath": "跳转路径",
 "text": "我的",
 "iconPath": "zh_tcwq/image/mine.png",
 "selectedIconPath": "zh_tcwq/image/mine_selected.png",
 "auth": 0
 }
]
}</pre>
</div>
然后在app.js文件中把app.json配置的导航栏隐藏
<div class="cnblogs_code">
<pre>onLaunch: function() {
// 隐藏原生的tabbar
wx.hideTabBar()
},</pre>
</div>
由于要自定义导航栏，所以要自己创建一个导航配置文件
在项目目录下创建一个config文件夹，创建一个router.js的文件
<div class="cnblogs_code">
<pre>module.exports = [
{
"pagePath": "跳转路径",
"text": "首页",
"iconPath": "/zh_tcwq/image/home.png",
"selectedIconPath": "/zh_tcwq/image/home_selected.png",
"auth": 0
},
{
"pagePath": "跳转路径",
"text": "行业社区",
"iconPath": "/zh_tcwq/image/community.png",
"selectedIconPath": "/zh_tcwq/image/community_selected.png",
"auth": 0
},
{
"pagePath": "跳转路径",
"text": "发现",
"iconPath": "/zh_tcwq/image/xbz_logo.png",
"selectedIconPath": "/zh_tcwq/image/close.png",
"auth": 0
},
{
"pagePath": "跳转路径",
"text": "项目对接",
"iconPath": "/zh_tcwq/image/docking.png",
"selectedIconPath": "/zh_tcwq/image/docking_selected.png",
"auth": 0
},
{
"pagePath": "跳转路径",
"text": "我的",
"iconPath": "/zh_tcwq/image/mine.png",
"selectedIconPath": "/zh_tcwq/image/mine_selected.png",
"auth": 0
}
]</pre>
</div>
接下来在导航栏组件中配置该导航按钮参数
<div class="cnblogs_code">
<pre>// zh_tcwq/pubcoms/navbar/navbar.js
import tabbarList from "../../../zh_tcwq/config/router.js"
Component({

/**
* 组件的属性列表
*/
properties: {
activeIdx: {
 type: Number,
 value: 0
},
auth: {
 type: Number,
 value: 0,
 observer: 'onAuthChanged'
}
},

/**
* 组件的初始数据
*/
data: {
tabbarList: tabbarList,
_auth: 0
},

/**
* 组件的方法列表
*/
methods: {
handleItemTap(e) {
 const {
 idx,
 path
 } = e.currentTarget.dataset

 if (idx === this.data.activeIdx) {
 this.trigger('refresh')
 return
 }
 wx.switchTab({
 url: `/${path}`,
 })
},
onAuthChanged(newVal) {
 wx.setStorageSync('__com-tabbar-auth', newVal)
 this.setData({
 _auth: newVal
 })
},
trigger(eventName, value = {}, info) {
 if (!eventName) {
 throw new TypeError('没有自定义事件名')
 }
 this.triggerEvent(eventName, value)
 console.log(`发送 ${eventName} 事件,携带的值为 ${typeof value === 'object' ? JSON.stringify(value) : value} ${info ? ' --- ' + info : ''}`)
}
},
ready() { },
/** 权限显示 */
pageLifetimes: {
show: function () {
 console.log('show')
 this.setData({
 _auth: wx.getStorageSync('__com-tabbar-auth')
 })
}
}
})</pre>
</div>
关于原作者点击跳转后无法动态激活底部样式的问题，我利用了一个小小的机智，通过组件间的参数传递，判断该参数是否和页面传递的参数一致，一致就显示为active状态
例如：在index页面下引用该组件：
先在json中配置组件：
<div class="cnblogs_code">
<pre>{
"usingComponents": {
"tabbar":"../../../pubcoms/navbar/navbar"
}
}</pre>
</div>
在wxml文件中引用
<div class="cnblogs_code">
<pre> <tabbar activeIdx="{{activeIdx}}"></tabbar></pre>
<pre></pre>
</div>
利用activeIdx来传入导航栏组件中，在index.js中声明该参数，因为我的index为第一页，所有我赋值的量为0（数组显示的规则是0,1,2,3,4，五个菜单）
<img src="https://img2018.cnblogs.com/blog/1412174/201906/1412174-20190611201804341-460786345.png">
每个引用该组件的页面都配置一下activeIdx，这样在每次加载的时候组件会判断两个参数是否一致，如果一致，就添加active样式。
<img src="https://img2018.cnblogs.com/blog/1412174/201906/1412174-20190611202033918-969078554.png">
不知道将的够不够清除，如果有问题的同学可以回复提问。
效果图如下，中间是一个圆形凸起的大logo
<img src="https://img2018.cnblogs.com/blog/1412174/201906/1412174-20190611202331002-2078090443.png">
  
来源：https://www.cnblogs.com/liao123/p/11005796.html

頁: [1]

琼殿技术论坛's Archiver

小程序开发日志-8、微信小程序自定义底部导航栏组件+跳转（已废弃）