微信小程序开发之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 相关文章推荐
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
当自定义数据属性为json格式字符串时jQuery的data api问题探讨
Feb 18 Javascript
jQuery仿Flash上下翻动的中英文导航菜单实例
Mar 10 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
javascript拖拽应用实例
Mar 25 Javascript
值得分享的bootstrap table实例
Sep 22 Javascript
关于angularJs指令的Scope(作用域)介绍
Oct 25 Javascript
jQuery实现6位数字密码输入框
Dec 29 Javascript
js实现一个猜数字游戏
Mar 31 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 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
php后门URL的防范
2013/11/12 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
2011/10/10 Javascript
js操作table示例(个人心得)
2013/11/29 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
微信小程序  modal弹框组件详解
2016/10/27 Javascript
JQuery统计input和textarea文字输入数量(代码分享)
2016/12/29 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
2017/01/22 Javascript
Angular弹出模态框的两种方式
2017/10/19 Javascript
微信小程序支付之c#后台实现方法
2017/10/19 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
CountUp.js实现数字滚动增值效果
2019/10/17 Javascript
vue  elementUI 表单嵌套验证的实例代码
2019/11/06 Javascript
vue实现数字滚动效果
2020/06/29 Javascript
Python读写Excel文件的实例
2013/11/01 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
Python解析多帧dicom数据详解
2020/01/13 Python
PyQt5通过信号实现MVC的示例
2021/02/06 Python
使用HTML5在网页中嵌入音频和视频播放的基本方法
2016/02/22 HTML / CSS
整理HTML5中支持的URL编码与字符编码
2016/02/23 HTML / CSS
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
服装设计专业毕业生推荐信
2013/11/09 职场文书
资产经营总监岗位职责范文
2013/12/01 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
双十佳事迹材料
2014/01/29 职场文书
个人事迹材料怎么写
2014/12/30 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL