微信小程序开发中选项卡页面切换实现方法详解

why 102 2024-09-10

本文主要介绍了微信小程序开发之选项卡(窗口底部tabbar)页面切换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

微信小程序开发中窗口底部tab栏切换页面很简单很方便.

代码:

1.app.json

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

//app.json

{

 "pages":[

  "pages/index/index",

  "pages/logs/logs"

 ],

 "window":{

  "backgroundTextStyle":"light",

  "navigationBarBackgroundColor": "#999999",

  "navigationBarTitleText": "tab",

  "navigationBarTextStyle":"white"

 },

  "tabBar": {

  "color": "#ccc",

  "selectedColor": "#35495e",

  "borderStyle": "white",

  "backgroundColor": "#f9f9f9",

  "list": [

   {

    "text": "首页",

    "pagePath": "pages/index/index",

    "iconPath": "images/home.png",

    "selectedIconPath": "images/home-actived.png"

   },

   {

    "text": "目录",

    "pagePath": "pages/catalogue/catalogue",

    "iconPath": "images/note.png",

    "selectedIconPath": "images/note-actived.png"

   },

   {

    "text": "我的",

    "pagePath": "pages/mine/mine",

    "iconPath": "images/profile.png",

    "selectedIconPath": "images/profile-actived.png"

   }

  ]

 }

}

pagePath是页面路径.iconPath是图片路径,icon 大小限制为40kb.

selectedIconPath:选中时的图片路径,icon 大小限制为40kb

tab Bar的最多5个,最少2个.

在pages目录下写好页面即可切换.


版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

上一篇:微信小程序获取验证码倒计时 60s 实例分析与解读
下一篇:微信小程序开发实现 tabs 选项卡效果实例代码解析
相关文章

 发表评论

暂时没有评论,来抢沙发吧~