微信小程序开发之选项卡(窗口底部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 相关文章推荐
关于hashchangebroker和statehashable的补充文档
Aug 08 Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 Javascript
点击标签切换和自动切换DIV选项卡
Aug 10 Javascript
详谈javascript中的cookie
Jun 03 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
May 05 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
js正则表达式注册页面表单验证
Oct 11 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
Vue之beforeEach非登录不能访问的实现(代码亲测)
Jul 18 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
vue导入.md文件的步骤(markdown转HTML)
Dec 31 Vue.js
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
使用apache模块rewrite_module (转)
2007/02/14 PHP
PHP数组的交集array_intersect(),array_intersect_assoc(),array_inter_key()函数的小问题
2011/05/29 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
对php 判断http还是https,以及获得当前url的方法详解
2019/01/15 PHP
Laravel5.7框架安装与使用学习笔记图文详解
2019/04/02 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
AngularJS学习笔记之TodoMVC的分析
2015/02/22 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
2015/12/15 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
详解vue中引入stylus及报错解决方法
2017/09/22 Javascript
vuex中使用对象展开运算符的示例
2017/09/25 Javascript
基于js中this和event 的区别(详解)
2017/10/24 Javascript
jQuery NProgress.js加载进度插件的简单使用方法
2018/01/31 jQuery
nodejs 如何手动实现服务器
2018/08/20 NodeJs
vue组件命名和props命名代码详解
2019/09/01 Javascript
重置Redux的状态数据的方法实现
2019/11/18 Javascript
Python help()函数用法详解
2014/03/11 Python
Python 查看文件的编码格式方法
2017/12/21 Python
python 批量修改/替换数据的实例
2018/07/25 Python
django中SMTP发送邮件配置详解
2019/07/19 Python
在python中用url_for构造URL的方法
2019/07/25 Python
在Python3 numpy中mean和average的区别详解
2019/08/24 Python
Python爬虫实现“盗取”微信好友信息的方法分析
2019/09/16 Python
Python如何获取文件路径/目录
2020/09/22 Python
python爬取youtube视频的示例代码
2021/03/03 Python
丝芙兰意大利官方网站:Sephora.it
2019/12/13 全球购物
What is the purpose of Void class? Void类的作用是什么?
2016/10/31 面试题
人力资源专员自我评价怎么写
2013/09/19 职场文书
人事专员的职责
2014/02/26 职场文书
学风建设演讲稿
2014/09/12 职场文书
学校安全管理制度
2015/08/06 职场文书
小学生教师节广播稿
2015/08/19 职场文书
比较几种Redis集群方案
2021/06/21 Redis
MySQL限制查询和数据排序介绍
2022/03/25 MySQL