小程序模板网

微信小程序--初始化完成自动切换到设定的tab页

发布时间:2017-12-28 15:54 所属栏目:小程序开发教程

我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab 等。如果我们的小程序是一个多tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们 ...

 
 
 

我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab 等。

如果我们的小程序是一个多tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),那么我们可以通过 tabBar 配置项指定 tab 栏的表现,以及tab 切换时显示的对应页面。

在微信小程序中,我们想设置多tab页的话,可以通过在app.json中设置tabBar中的list。list中路径的顺序代表了其在tab中显示的顺序。而在page中设定的tab的路径中的第一个路径,则是页面初始化完成时显示的tab页。因此,假设我们想要页面一初始化完成,切换到第二个tab页,可以在page中调换配置的路径的顺序。 
下面让我们结合代码和图片一起看看效果。

在app.json中配置如下:

 

		
  1. {
  2. "pages":[
  3.  
  4. "pages/main/simple/text",
  5. "pages/main/advanced/text",
  6. "pages/main/mine/text",
  7. "pages/main/recharge/text",
  8. "pages/logs/logs"
  9. ],
  10. "window":{
  11. "backgroundTextStyle":"light",
  12. "navigationBarBackgroundColor": "#444444",
  13. "navigationBarTitleText": "文字",
  14. "navigationBarTextStyle":"#ffffff"
  15. }
  16. ,
  17. "tabBar": {
  18. "color": "#7A7E83",
  19. "selectedColor": "#3cc51f",
  20. "borderStyle": "black",
  21. "backgroundColor": "#ffffff",
  22. "list": [
  23. {
  24. "pagePath": "pages/main/simple/text",
  25. "iconPath": "pages/image/basic.png",
  26. "selectedIconPath": "pages/image/basic_HL.png",
  27. "text": "基础"
  28. },
  29. {
  30. "pagePath": "pages/main/advanced/text",
  31. "iconPath": "pages/image/advance.png",
  32. "selectedIconPath": "pages/image/advance_HL.png",
  33. "text": "高级"
  34. },
  35. {
  36. "pagePath": "pages/main/mine/text",
  37. "iconPath": "pages/image/mine.png",
  38. "selectedIconPath": "pages/image/mine_HL.png",
  39. "text": "我的"
  40. }
  41. ]
  42. }
  43. }

在tabBar中一起设定了3个tab页,分别是“基础”、“高级”、“我的”,分别对应的路径是:

 

		
  1. pages/main/simple/text
  2. pages/main/advanced/text
  3. pages/main/mine/text

他的属性“list”按照上面的配置,显示的界面如下:

                        

即页面初始化完成默认打开tab是“基础”页面。

如果我们将上面的配置中,仅仅对pages属性做一下变动,即调换“基础”页面和“高级”页面的顺序

 

		
  1. "pages":[
  2.  
  3. "pages/main/advanced/text",
  4. "pages/main/simple/text", "pages/main/advanced/text", "pages/main/mine/text", "pages/main/recharge/text", "pages/logs/logs"
  5. ]

显示的界面如下:

                  

从图1和图2,我们可以看出,页面初始化完成后,显示的是“高级”页面。也就是说多tab页面,在pages属性中定义的第一个tab路径就是页面初始化完成显示的界面。

如果仅仅对原配置的tabBar属性中的list属性做变动:

 

		
  1. "tabBar": {
  2. "color": "#7A7E83",
  3. "selectedColor": "#3cc51f",
  4. "borderStyle": "black",
  5. "backgroundColor": "#ffffff",
  6. "list": [
  7.  
  8. {
  9. "pagePath": "pages/main/advanced/text",
  10. "iconPath": "pages/image/advance.png",
  11. "selectedIconPath": "pages/image/advance_HL.png",
  12. "text": "高级"
  13. },
  14. {
  15. "pagePath": "pages/main/simple/text",
  16. "iconPath": "pages/image/basic.png",
  17. "selectedIconPath": "pages/image/basic_HL.png",
  18. "text": "基础"
  19. },
  20. { "pagePath": "pages/main/mine/text", "iconPath": "pages/image/mine.png", "selectedIconPath":
  21. "pages/image/mine_HL.png", "text": "我的" } ] }

将“高级”页面和“初级”页面的顺序调换一下,效果如下:

                            

对比图1和图3,发现在底部的tab中,“高级”排在了“初级”的前面,而页面初始化完成显示的界面还是“基础”页面。

总结:可以在app.json中配置多tab页面。tabBar中的list中定义的tab页面路径的顺序代表了在tab中显示的顺序,在pages属性定义的tab路径中,第一个tab页面路径,就是页面初始化完成显示的页面。因此,如果我们想让页面初始化完成的时候,就跳转到第二个tab页面,可以在pages属性中将第二个tab页面定义在路径的最前面



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