微信小程序开发之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 remove 自定义数组删除方法
Oct 20 Javascript
JavaScript 原型链学习总结
Oct 29 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
uploadify在Firefox下丢失session问题的解决方法
Aug 07 Javascript
JQuery勾选指定name的复选框集合并显示的方法
May 18 Javascript
JavaScript Date对象详解
Mar 01 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
Apr 05 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
解决微信二次分享不显示摘要和图片的问题
Aug 18 Javascript
浅谈React中组件间抽象
Jan 27 Javascript
JavaScript利用键盘码控制div移动
Mar 19 Javascript
详解Anyscript开发指南绕过typescript类型检查
Sep 23 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类
2006/07/15 PHP
PHP date函数参数详解
2006/11/27 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
CI框架Session.php源码分析
2014/11/03 PHP
Laravel 5框架学习之环境与配置
2015/04/08 PHP
表单内同名元素的控制
2006/11/22 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
JS对象深度克隆实例分析
2017/03/16 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
浅谈webpack打包生成的bundle.js文件过大的问题
2018/02/22 Javascript
解决IE11 vue +webpack 项目中数据更新后页面没有刷新的问题
2018/09/25 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
微信小程序使用 vant Dialog组件的正确方式
2020/02/21 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
[13:40]TI3青蛙君全程回顾 DOTA2我们为梦想再战
2013/09/13 DOTA
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python构造函数及解构函数介绍
2015/02/26 Python
Python实现朴素贝叶斯分类器的方法详解
2018/07/04 Python
详解如何将python3.6软件的py文件打包成exe程序
2018/10/09 Python
python:HDF和CSV存储优劣对比分析
2020/06/08 Python
美国知名生活购物网站:Goop
2017/11/03 全球购物
独特的礼品和创新的科技产品:The Grommet
2018/02/24 全球购物
allbeauty美国:英国在线美容店
2019/03/11 全球购物
介绍一下Prototype的$()函数,$F()函数,$A()函数都是什么作用?
2014/03/05 面试题
《乞巧》教学反思
2014/02/27 职场文书
个人函授自我鉴定
2014/03/25 职场文书
父母对孩子说的话
2014/04/12 职场文书
收入及婚姻状况证明
2014/11/20 职场文书
2014年建筑工作总结
2014/11/26 职场文书
营业用房租赁协议书
2014/11/26 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
学雷锋感言
2015/08/03 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
教你如何用cmd快速登录服务器
2022/06/10 Servers