微信小程序开发之选项卡(窗口底部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 相关文章推荐
得到文本框选中的文字,动态插入文字的js代码
Mar 07 Javascript
js checkbox(复选框) 使用集锦
Apr 28 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
探究JavaScript函数式编程的乐趣
Dec 14 Javascript
使用JavaScript脚本判断页面是否在微信中被打开
Mar 06 Javascript
Bootstrap布局方式详解
May 27 Javascript
JavaScript 实现的checkbox经典实例分享
Oct 16 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
Feb 13 Javascript
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 jQuery
Vue中使用wangeditor富文本编辑的问题
Feb 07 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
php更新mysql后获取改变行数的方法
2014/12/25 PHP
PHP连接access数据库
2015/03/27 PHP
Yii框架where查询用法实例分析
2019/10/22 PHP
javascript html 静态页面传参数
2009/04/10 Javascript
Jquery显示、隐藏元素以及添加删除样式
2013/08/09 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
Javascript实现网络监测的方法
2015/07/31 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
Vue 过滤器filters及基本用法
2017/12/26 Javascript
详解使用create-react-app快速构建React开发环境
2018/05/16 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
微信小程序实现倒计时补零功能
2018/07/09 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
小程序和web画三角形实现解析
2019/09/02 Javascript
Python入门篇之对象类型
2014/10/17 Python
python中requests爬去网页内容出现乱码问题解决方法介绍
2017/10/25 Python
python基于ID3思想的决策树
2018/01/03 Python
python 对象和json互相转换方法
2018/03/22 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
python调用外部程序的实操步骤
2019/03/04 Python
Python 异步协程函数原理及实例详解
2019/11/13 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
Python-opencv 双线性插值实例
2020/01/17 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
解决HTML5手机端页面缩放的问题
2017/10/27 HTML / CSS
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
国际奢侈品品牌童装购物网站:Designer Childrenswear
2019/05/08 全球购物
美国美食礼品篮网站:Gourmet Gift Baskets
2019/12/15 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
社区志愿者活动总结
2014/06/26 职场文书
五年级小学生评语
2014/12/26 职场文书
实习生个人总结范文
2015/02/28 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
聊聊Python中关于a=[[]]*3的反思
2021/06/02 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL