mpvue

微信小程序实现首页不显示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
成功!!!
上一篇下一篇

猜你喜欢

热点阅读