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


Posted in Javascript onApril 12, 2017

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

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

代码:

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 相关文章推荐
jquery ready()的几种实现方法小结
Jun 18 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
js实现图片无缝滚动
Dec 23 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
详解Node.js开发中的express-session
May 19 Javascript
Bootstrap Table 搜索框和查询功能
Nov 30 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
node.js通过axios实现网络请求的方法
Mar 05 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
快速解决layui弹窗按enter键不停弹窗的问题
Sep 18 Javascript
JQuery常用选择器功能与用法实例分析
Dec 23 jQuery
如何制作自己的原生JavaScript路由
May 05 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 #Javascript
使用jQuery和ajax代替iframe的方法(详解)
Apr 12 #jQuery
微信小程序 仿美团分类菜单 swiper分类菜单
Apr 12 #Javascript
jQuery用noConflict代替$的实现方法
Apr 12 #jQuery
jQuery判断邮箱格式对错实例代码讲解
Apr 12 #jQuery
微信小程序 引入es6 promise
Apr 12 #Javascript
JavaScript队列的应用实例详解【经典数据结构】
Apr 12 #Javascript
You might like
构建简单的Webmail系统
2006/10/09 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
PHP二维关联数组的遍历方式(实例讲解)
2017/10/18 PHP
在phpstudy集成环境下的nginx服务器下配置url重写
2019/12/02 PHP
php gethostbyname获取域名ip地址函数详解
2010/01/24 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
jquery 插件学习(六)
2012/08/06 Javascript
jquery下checked取值问题的解决方法
2012/08/09 Javascript
javascript 二进制运算技巧解析
2012/11/27 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
2013/12/12 Javascript
js获取触发事件元素在整个网页中的绝对坐标(示例代码)
2013/12/13 Javascript
javascript中直接引用Microsoft的COM生成Word
2014/01/20 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
JavaScript中的typeof操作符用法实例
2014/04/05 Javascript
Jquery选择器中使用变量实现动态选择例子
2014/07/25 Javascript
JQuery右键菜单插件ContextMenu使用指南
2014/12/19 Javascript
jquery跟随屏幕滚动效果的实现代码
2016/04/13 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
Javascript实现基本运算器
2017/07/15 Javascript
jqueryUI tab标签页代码分享
2017/10/09 jQuery
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python程序员面试题 你必须提前准备!(答案及解析)
2018/01/23 Python
Python微信公众号开发平台
2018/01/25 Python
如何用python整理附件
2018/05/13 Python
Python定时任务sched模块用法示例
2018/07/16 Python
基于Tensorflow读取MNIST数据集时网络超时的解决方式
2020/06/22 Python
解决Python import .pyd 可能遇到路径的问题
2021/03/04 Python
Lookfantastic阿联酋官网:英国知名美妆护肤购物网站
2020/05/26 全球购物
毕业生求职的求职信
2013/12/05 职场文书
教师节倡议书
2014/08/30 职场文书
装配出错检讨书
2014/09/23 职场文书
通知函的格式
2015/04/27 职场文书
用电申请报告范文
2015/05/18 职场文书
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python