现在设计就是底部导航中间需要有一个大的加号按钮 而小程序本身没有操作tabbar的功能 只能设置文字 与选中不选中的图片
解决方式是
1.去掉app.json中 tabBar的配置
2.写一个公有的组件
tabbar.wxml
内容如下
<!--公共tabbar-->
<template name="tabbar">
<view class="tabbar_box" style="background-color:{{tabbar.backgroundColor}}; {{tabbar.position == 'top' ? 'top:0' : 'bottom:0'}}">
<block wx:for="{{tabbar.list}}" wx:for-item="item" wx:key="index">
<navigator wx:if='{{index==1}}' class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
<image class="tabbar_iconf" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
</navigator>
<navigator wx:else class="tabbar_nav" url="{{item.pagePath}}" style="width:{{1/tabbar.list.length*100}}%; color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="redirect">
<image class="tabbar_icon" src="{{item.selected ? item.selectedIconPath : item.iconPath}}"></image>
<text>{{item.text}}</text>
</navigator>
</block>
</view>
</template>
tabbar.json
{
"component": true,
"usingComponents": {
}
}
tabbar.js
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: {
},
data: {
},
});
现在公用底部导航有了 就差引入和js配置了
3.在app.js中配置 tabbar的相关内容(切换操作 图片文本样式的配置)
//切换tabbar的方法
editTabBar: function(){
var tabbar = this.globalData.tabbar,
currentPages = getCurrentPages(),
_this = currentPages[currentPages.length - 1],
pagePath = _this.__route__;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for(var i in tabbar.list){
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
上边这个是切换tabbar的方法
//这个是配置的图片和文本 和再app.json中的一样哦
globalData: {
tabbar:{
color: "#000000",
selectedColor: "#FFB029",
backgroundColor: "#ffffff",
borderStyle: "black",
list: [
{
pagePath: "/pages/index/index",
text: "首页",
iconPath: "../../images/index.png",
selectedIconPath: "../../images/index-active.png",
selected: true
},
{
pagePath: "/pages/address/address",
iconPath:"../../images/a.jpg",
selectedIconPath: "../../images/a.jpg",
selected: false
},
{
pagePath: "/pages/me/me",
text: "我的",
iconPath: "../../images/me.png",
selectedIconPath: "../../images/me-active.png",
selected: false
}
],
position: "bottom"
}
}
这个就是配置tabbar的图片文本这些个 和app.json配置很像哦
如果看不方便的话我把整个app.js贴出来
//app.js
App({
onLaunch: function (options) {
// 小程序启动逻辑
// 1. 登录
// 2. 查看用户是否授权
// 3. 获取用户的设备信息
var thisPage = this
console.log(options)
if(options.path!=='pages/index/index'){
this.globalData.destPath = options.path
}
// 登录
wx.login({
success: res => {
//todo 发送 res.code 到后台换取 openId, sessionKey, unionId
wx.request({
url: this.globalData.serverHost + '/sa/login',
data: res.code,
method: 'post',
success: function(res){
wx.hideLoading()
if(res.data.code===0){
thisPage.globalData.sessionToken = res.data.data.ticket
if (!res.data.data.hasData){
wx.redirectTo({
url: '/pages/index/auth',
})
} else {
thisPage.globalData.authorized = true
}
} else {
wx.showToast({
title: '登录失败,请重新启动小程序',
mask: true
})
}
},
fail: function(data){
console.log(data)
}
})
}
})
wx.showLoading({
title: '登录中',
mask: true
})
},
editTabBar: function(){
var tabbar = this.globalData.tabbar,
currentPages = getCurrentPages(),
_this = currentPages[currentPages.length - 1],
pagePath = _this.__route__;
(pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
for(var i in tabbar.list){
tabbar.list[i].selected = false;
(tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
}
_this.setData({
tabbar: tabbar
});
},
globalData: {
tabbar:{
color: "#000000",
selectedColor: "#FFB029",
backgroundColor: "#ffffff",
borderStyle: "black",
list: [
{
pagePath: "/pages/index/index",
text: "首页",
iconPath: "../../images/index.png",
selectedIconPath: "../../images/index-active.png",
selected: true
},
{
pagePath: "/pages/address/address",
iconPath:"../../images/a.jpg",
selectedIconPath: "../../images/a.jpg",
selected: false
},
{
pagePath: "/pages/me/me",
text: "我的",
iconPath: "../../images/me.png",
selectedIconPath: "../../images/me-active.png",
selected: false
}
],
position: "bottom"
},
userInfo: null,
authorized: false,
systemInfo: null,
systemInfoStr: null,
sessionToken: ''
}
})
3.在相关页面使用该写好的组件
我分别在首页 加号 我的三个页面引人该组件 我就先写出index页面 其他都一样哦
index.wxml 使用该组件
<import src="../../components/tabbar/tabbar.wxml"/>
<template is="tabbar" data="{{tabbar}}"/>
index.json中引入该组件
{
"usingComponents": {
"tabbar": "../../components/tabbar/tabbar"
}
}
index.js中加入切换的方法
onLoad: function () {
app.editTabBar();
},
现在就可以啦
不过有一个问题就是切换页面的时候会出现闪一下的情况 应该是页面重新渲染加载的问题 前期还没想到解决方法 后期再继续研究 也可以请大神们指点