微信小程序开发之Tabbar实例详解


Posted in Javascript onJanuary 09, 2017

微信小程序 Tabbar

1.下载微信小程序开发软件;

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201714

2.扫描二维码登录,在手机点击确认登录

微信小程序开发之Tabbar实例详解

3.新建一个项目,这里选择无APPID,如果需要填写APPID,需要到微信小程序里面注册,然后就可以获取APPID,填写项目名称,选择项目目录(注释:微信小程序不会自己创建主目录文件,所以自己先建立一个项目文件夹,然后选择存放到这个文件夹中),添加项目,就生成了一个项目工程,这是注意有一个单选单按钮,如果取消这个单选按钮,就会创建一个空的工程,我选择选中这个按钮;

微信小程序开发之Tabbar实例详解

4.然后得到一个新的工程,现在在下方要放一个tabbar,先新建一个image目录,点击目录右键->新建->目录

微信小程序开发之Tabbar实例详解

微信小程序开发之Tabbar实例详解

5.点击image文件夹->硬盘打开,将图片拉入次目录中,注意:图片大小限制为40kb,尺寸81px * 81px;

微信小程序开发之Tabbar实例详解

6。先看一下目录结构,程序有两个目录,一个pages和utils,其中pages里面又包含index和logs,这个两个目录是两个页面(第一个页面就是运行程序看到的,第二页面是点击我们的头像出来的),我们就要这两个页面作为tabbar两个页面;

点击点击app.json写tabbar控件;为了方便我把image放到了根目录下,选择image目录点击右键->硬盘打开->将Image目录copy到根目录下,删除原目录就可以了,代码如下:

微信小程序开发之Tabbar实例详解

方法说明:

color:未选择字体颜色

selectedColor:选择字体颜色

borderStyle:tabbar上方线的颜色white(仅支持白色和黑色)

backgroundColor:tabbar背景颜色

networkTimeout:设置网络超时时间

debug:设置debug模式开启

效果如图:

微信小程序开发之Tabbar实例详解

注意:list的页面不许在app.json的pages里面注册过;

微信小程序开发之Tabbar实例详解

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
两个JavaScript jsFiddle JSBin在线调试器
Mar 14 Javascript
JS request函数 用来获取url参数
May 17 Javascript
jquery 的 $("#id").html() 无内容的解决方法
Jun 07 Javascript
ExtJs使用总结(非常详细)
Mar 22 Javascript
JS实现淘宝幻灯片效果的实现方法
Mar 22 Javascript
node.js实现BigPipe详解
Dec 05 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
Feb 02 Javascript
详解AngularJS中的表格使用
Jun 16 Javascript
全面解析Bootstrap图片轮播效果
Dec 03 Javascript
动态的9*9乘法表效果的实现代码
May 16 Javascript
用JavaScript获取页面文档内容的实现代码
Jun 10 Javascript
vue自动化表单实例分析
May 06 Javascript
javascript监听页面刷新和页面关闭事件方法详解
Jan 09 #Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 #Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 #Javascript
原生Javascript插件开发实践
Jan 09 #Javascript
Angular下H5上传图片的方法(可多张上传)
Jan 09 #Javascript
详解网站中图片日常使用以及优化手法
Jan 09 #Javascript
jQuery实现表格元素动态创建功能
Jan 09 #Javascript
You might like
nginx下安装php7+php5
2016/07/31 PHP
PHP验证码类ValidateCode解析
2017/01/07 PHP
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
Jquery实现仿腾讯娱乐频道焦点图(幻灯片)特效
2015/03/06 Javascript
jQuery获取父元素及父节点的方法小结
2016/04/14 Javascript
基于angularjs实现图片放大镜效果
2016/08/31 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
JavaScript实现简单验证码
2020/08/24 Javascript
[20:46]Ti4循环赛第三日VG vs DK
2014/07/12 DOTA
[00:59]DOTA2英雄背景故事——上古巨神
2020/06/28 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
连接Python程序与MySQL的教程
2015/04/29 Python
python压缩文件夹内所有文件为zip文件的方法
2015/06/20 Python
Python数据类型详解(三)元祖:tuple
2016/05/08 Python
PyQt5笔记之弹出窗口大全
2019/06/20 Python
Django之创建引擎索引报错及解决详解
2019/07/17 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
python 实现快速生成连续、随机字母列表
2019/11/28 Python
浅析Python模块之间的相互引用问题
2021/02/26 Python
通过Canvas及File API缩放并上传图片完整示例
2013/08/08 HTML / CSS
卡西欧G-SHOCK英国官网: 防水防震手表
2018/01/08 全球购物
女大学生毕业找工作的自我评价
2013/10/03 职场文书
2014年道德讲堂实施方案
2014/03/05 职场文书
大课间活动实施方案
2014/03/06 职场文书
环保倡议书400字
2014/05/15 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
《静夜思》教学反思
2016/02/17 职场文书
dubbo服务整合zipkin详解
2021/07/26 Java/Android
MySQL创建管理HASH分区
2022/04/13 MySQL
CSS 鼠标点击拖拽效果的实现代码
2022/12/24 HTML / CSS