用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2017-8-25 00:27

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

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

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

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

                        

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

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

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

显示的界面如下:

                  

从图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. "pagePath": "pages/main/advanced/text",
  9. "iconPath": "pages/image/advance.png",
  10. "selectedIconPath": "pages/image/advance_HL.png",
  11. "text": "高级"
  12. },
  13. {
  14. "pagePath": "pages/main/simple/text",
  15. "iconPath": "pages/image/basic.png",
  16. "selectedIconPath": "pages/image/basic_HL.png",
  17. "text": "基础"
  18. },
  19. { "pagePath": "pages/main/mine/text", "iconPath": "pages/image/mine.png", "selectedIconPath":
  20. "pages/image/mine_HL.png", "text": "我的" } ] }

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

                            

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

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

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: tangxiujiang 来自: csdn

相关阅读