微信小程序开发之选项卡(窗口底部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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
用JS实现3D球状标签云示例代码
Dec 01 Javascript
javascript和jquery修改a标签的href属性
Dec 16 Javascript
javascript实现简单的html5视频播放器
May 06 Javascript
js实现C#的StringBuilder效果完整实例
Dec 22 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
Jul 11 Javascript
使用Dropzone.js上传的示例代码
Oct 10 Javascript
vue系列之requireJs中引入vue-router的方法
Jul 18 Javascript
从源码里了解vue中的nextTick的使用
Nov 22 Javascript
jQuery无冲突模式详解
Jan 17 jQuery
简单了解Ajax表单序列化的实现方法
Jun 14 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 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
php preg_match_all结合str_replace替换内容中所有img
2008/10/11 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
织梦sitemap地图实时推送给百度的教程
2015/08/03 PHP
PHP 5.6.11中CURL模块问题的解决方法
2016/08/08 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
JavaScript Serializer序列化时间处理示例
2014/07/31 Javascript
javascript实时显示北京时间的方法
2015/03/12 Javascript
JS实现左右拖动改变内容显示区域大小的方法
2015/10/13 Javascript
JavaScript ParseFloat()方法
2015/12/18 Javascript
jquery配合.NET实现点击指定绑定数据并且能够一键下载
2016/10/28 Javascript
JS正则替换掉小括号及内容的方法
2016/11/29 Javascript
学习vue.js表单控件绑定操作
2016/12/05 Javascript
前端JS面试中常见的算法问题总结
2016/12/23 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
微信小程序 两种为对象属性赋值的方式详解
2017/02/23 Javascript
vue.js开发环境安装教程
2017/03/17 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
js实现控制文件拖拽并获取拖拽内容功能
2018/02/17 Javascript
vue项目中实现图片预览的公用组件功能
2018/10/26 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
实现elementUI表单的全局验证的方法步骤
2019/04/29 Javascript
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
在vue项目实现一个ctrl+f的搜索功能
2020/02/28 Javascript
Element-ui upload上传文件限制的解决方法
2021/01/22 Javascript
python创建关联数组(字典)的方法
2015/05/04 Python
Python入门必须知道的11个知识点
2018/03/21 Python
对Python 语音识别框架详解
2018/12/24 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
让Python脚本暂停执行的几种方法(小结)
2019/07/11 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
七年级音乐教学反思
2014/01/26 职场文书
运动会通讯稿150字
2014/02/15 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
Mysql8.0递归查询的简单用法示例
2021/08/04 MySQL
一些让Python代码简洁的实用技巧总结
2021/08/23 Python