微信小程序实现首页不显示tabBar功能
2019-05-13 本文已影响249人
寻找大海的鱼
一.解决方案
①只要将首页index目录不加入app.json中tabBar的list列表里就好了
②在app.json的pages里将index目录位置放在第一个,也就是小程序刚进入的首页位置
③通过wx.switchTab方法跳转到具有tabBar功能的页面,就可以啦
wx.switchTab({url: '../home/home'})
二.demo演示
1.首页index的wxml代码如下
<view class="container">
<view>
<button class="gotoBtn" bindtap="gotoBtnView"> 跳转 </button>
</view>
</view>
首页index的js代码如下:
Page({
data: {
},
//事件处理函数
gotoBtnView: function() {
wx.switchTab({
url: '../home/home'
})
},
})
2.将index放首页位置,将需要tabbar功能的页面(home和myInfo)添加到list中
app.json代码如下
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/myInfo/myInfo"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [
{
"pagePath": "pages/home/home",
"text": "home",
"iconPath": "",
"selectedIconPath": ""
},
{
"pagePath": "pages/myInfo/myInfo",
"text": "myInfo",
"iconPath": "",
"selectedIconPath": ""
}
]
},
"sitemapLocation": "sitemap.json"
}
3.测试
1.首页如下图所示,没有tabBar功能,点击跳转
index.png
2.跳转后的home页面(具有tabBar功能),可以使用tabBar切换页面了
home.png
myInfo.png
成功!!!