小程序模板网

微信小程序tabBar底部导航不显示问题解析

发布时间:2018-04-18 11:06 所属栏目:小程序开发教程

搞了好久原来是位置的原因唉闹心 
直接上代码: 
出不来的代码:

 

				
  1. [html] view plain copy print?在CODE上查看代码片派生到我的代码片
  2. {
  3. "pages": [
  4. "pages/splash/splash",
  5. "pages/zhuye/zhuye",
  6. "pages/list/list",
  7. "pages/item/item",
  8. "pages/search/search",
  9. "pages/profile/profile"
  10. ],
  11. "window": {
  12. "navigationBarBackgroundColor": "#35495e",
  13. "navigationBarTextStyle": "white",
  14. "navigationBarTitleText": "电影 « 豆瓣",
  15. "backgroundColor": "#fff",
  16. "backgroundTextStyle": "dark",
  17. "enablePullDownRefresh": true
  18. },
  19. "tabBar": {
  20. "color": "#ccc",
  21. "selectedColor": "#35495e",
  22. "borderStyle": "white",
  23. "backgroundColor": "#f9f9f9",
  24. "list": [
  25. {
  26.  
  27. "pagePath": "pages/zhuye/zhuye",
  28. "iconPath": "images/board.png",
  29. "selectedIconPath": "images/board-actived.png",
  30. "text": "榜单"
  31. },
  32. {
  33.  
  34. "pagePath": "pages/search/search",
  35. "iconPath": "images/search.png",
  36. "selectedIconPath": "images/search-actived.png",
  37. "text": "搜索"
  38. },
  39. {
  40.  
  41. "pagePath": "pages/profile/profile",
  42. "iconPath": "images/profile.png",
  43. "selectedIconPath": "images/profile-actived.png",
  44. "text": "我的"
  45. }
  46. ]
  47. },
  48. "networkTimeout": {
  49. "request": 10000,
  50. "connectSocket": 10000,
  51. "uploadFile": 10000,
  52. "downloadFile": 10000
  53. },
  54. "debug": true
  55. }

解决方案一:把 tabBar配置中的 "pagePath": "pages/zhuye/zhuye",换成 配置为首页的pages/splash/splash就可以了;

方案二:完美解决方案  在wxml里 加入 open-type="switchTab"

 

				
  1. [html] view plain copy print?在CODE上查看代码片派生到我的代码片
  2. <navigator url="../zhuye/zhuye" open-type="switchTab" >
  3. <button class="btn" bindtap="start" wx:if="{{index == movies.length - 1}}" >立即体验</button>
  4. </navigator>

方案三:  js里面用这个跳转带bar的页面



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/23687.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询