微信小程序开发之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 精粹笔记
May 09 Javascript
jquery中实现标签切换效果的代码
Mar 01 Javascript
利用window.name实现windowStorage代码分享
Jan 02 Javascript
Javascript连接多个数组不用concat来解决
Mar 24 Javascript
浅谈javascript构造函数与实例化对象
Jun 22 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
Jan 20 Javascript
轻松实现jQuery添加删除按钮Click事件
Mar 13 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
vue组件实现进度条效果
Jun 06 Javascript
angularJS1 url中携带参数的获取方法
Oct 09 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
程序员编程十条戒律
2009/07/09 PHP
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
YII路径的用法总结
2014/07/09 PHP
学习php开源项目的源码指南
2014/12/21 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
PHP 中 var_export、print_r、var_dump 调试中的区别
2018/06/19 PHP
Yii2框架视图(View)操作及Layout的使用方法分析
2019/05/27 PHP
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
javascript 随机展示头像实现代码
2011/12/06 Javascript
BootStrap制作导航条实例代码
2016/05/06 Javascript
jQ处理xml文件和xml字符串的方法(详解)
2016/11/22 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
2017/01/20 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
2017/09/23 jQuery
解决vue中对象属性改变视图不更新的问题
2018/02/23 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
深入分析JavaScript 事件循环(Event Loop)
2020/06/19 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
2020/07/28 Javascript
[01:55]2014DOTA2国际邀请赛 BBC正赛第一天总结
2014/07/10 DOTA
python错误处理详解
2014/09/28 Python
python实现2048小游戏
2015/03/30 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python3中的md5加密实例
2018/05/29 Python
基于django传递数据到后端的例子
2019/08/16 Python
Django学习之文件上传与下载
2019/10/06 Python
pd.DataFrame统计各列数值多少的实例
2019/12/05 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
Python抓包并解析json爬虫的完整实例代码
2020/11/03 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
Bench加拿大官方网站:英国城市服装品牌
2017/11/03 全球购物
Monki官网:斯堪的纳维亚的独立时尚品牌
2020/11/09 全球购物
如何向接受结构参数的函数传入常数值
2016/02/17 面试题
法人代表授权委托书
2014/04/08 职场文书
代领报检证委托书范本
2014/10/11 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
opencv读取视频并保存图像的方法
2021/06/04 Python