微信小程序开发之选项卡(窗口底部TabBar)页面切换

 更新时间:2017年04月12日 09:43:11   作者:dzp_coder  
本文主要介绍了微信小程序开发之选项卡(窗口底部TabBar)页面切换的相关知识。具有很好的参考价值。下面跟着小编一起来看下吧

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

代码:

1.app.json

//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目录下写好页面即可切换.

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

相关文章

  • 理解JavaScript设计模式中的建造者模式

    理解JavaScript设计模式中的建造者模式

    这篇文章主要介绍了理解JavaScript设计模式中的建造者模式,文章基于JavaScript的相关资料展开箱子内容介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04
  • JavaScript Cookie显示用户上次访问的时间和次数

    JavaScript Cookie显示用户上次访问的时间和次数

    用cookies记录用户的访问时间与次数,然后再次访问时,在读取。
    2009-12-12
  • js中Map和Set的用法及区别实例详解

    js中Map和Set的用法及区别实例详解

    map和set一样是关联式容器,它们的底层容器都是红黑树,区别就在于map的值不作为键,键和值是分开的,下面这篇文章主要给大家介绍了关于js中Map和Set的用法及区别的相关资料,需要的朋友可以参考下
    2022-02-02
  • JS中的==运算: [''''] == false —>true

    JS中的==运算: [''''] == false —>true

    这篇文章主要介绍了JS中的==运算: [''] == false —>true的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2016-07-07
  • JavaScript中跨域调用Flash的方法

    JavaScript中跨域调用Flash的方法

    这篇文章主要介绍了JavaScript中跨域调用Flash的方法,只需要在Flash中加一句话即可,需要的朋友可以参考下
    2014-08-08
  • js跨域的几种解决方案

    js跨域的几种解决方案

    本文主要介绍了js跨域的几种解决方案,主要介绍了8种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-05-05
  • 单击复制文字兼容各浏览器的完美解决方案

    单击复制文字兼容各浏览器的完美解决方案

    单击复制文字的js找了很久,由于之前没有接触过,完全不知道兼容ie及标准dom浏览器,不仅仅要通过js,而且需要flash的帮忙,下面与大家分享下具体的实现方法
    2013-07-07
  • js 巧妙去除数组中的重复项

    js 巧妙去除数组中的重复项

    最近, 我在看YAHOO.util.YUILoader类的源码, 其中有个排除数组重复项的方法, 让我觉得甚为巧妙, 这里分享下…
    2010-01-01
  • 全面解析Bootstrap中nav、collapse的使用方法

    全面解析Bootstrap中nav、collapse的使用方法

    这篇文章主要为大家详细解析了Bootstrap中nav、collapse的使用方法,感兴趣的朋友可以参考一下
    2016-05-05
  • 微信小程序实现日历功能

    微信小程序实现日历功能

    这篇文章主要为大家详细介绍了微信小程序实现日历功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-11-11

最新评论