小程序之Tab切换(二)
之前写的那个Tab切换是常规逻辑写的,接下来我会列出小程序api自带的写法,当然了 这个写法更加简单,实用。我们只需要配置app.json这个文件即可。
先看效果图:

app.json代码:(有木有感觉很简单的样子哈哈)
"tabBar": {
"color":"#fff",
"selectedColor":"#1296db",
"backgroundColor":"#ccc",
"list": [
{
"pagePath": "pages/index/index",
"text": "首页",
"iconPath":"images/iconHome.png",
"selectedIconPath":"images/seleHome.png"
},
{
"pagePath": "pages/logs/logs",
"text": "地址",
"iconPath": "images/iconMap.png",
"selectedIconPath": "images/seleMap.png"
}
]
},
☀下面是app.json 配置项列表:

☀tabBar属性说明:

☀list的属性说明:

PS:
- 当设置 position 为 top 时,将不会显示 icon
- tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。
小程序之Tab切换(二)的更多相关文章
- 微信小程序写tab切换
微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...
- 小程序之 tab切换(选项卡)
好久没有写东西了 今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view < ...
- 小程序之Tab切换
小程序越来越火了,作为一名,额 有理想的攻城狮,当然要紧跟互联网时代的步伐啦,于是我赶紧抽时间学习了一下小程序的开发,顺便把经验分享给大家. 对于申请账号以及安装开发工具等,大家可以看官网:http ...
- 小程序的tab切换事件
index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...
- 微信小程序之tab切换
.wxml <view class="select_box"> <scroll-view scroll-x="true" style=&quo ...
- 微信小程序滚动tab的实现
微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...
- 小程序入口构造工具&二维码测试工具
小程序入口构造工具&二维码测试工具 本文将介绍我们小程序中隐藏的两个工具页面.原理虽不复杂,收益却实实在在,或许也能给诸君带来启发. 入口构造工具 痛点 PM&运营 投放链接 PM&a ...
- 微信小程序《沈航二手书》
微信小程序<沈航二手书> 0x01. 利益相关者 利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利 ...
- 微信小程序动态生成保存二维码
起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...
随机推荐
- Excel 2010高级应用-条状图(五)
Excel 2010高级应用-条状图(五) 基本操作如下: 1.新建一个Excel空白文档,并命名条状图 2.单击"插入",找到条状图的样图 3.选择其中一种类型的条状图样图,在空 ...
- Linux显示目前与过去登入系统的用户相关信息
Linux显示目前与过去登入系统的用户相关信息 youhaidong@youhaidong-ThinkPad-Edge-E545:~$ last youhaido pts/0 :0 Sat Jan 2 ...
- idea好用插件(一)
代码规范插件 Alibaba Java Coding Guidelines 安装后 可以在文件.文件夹邮件,显示编码规约扫描,点击后显示 可以通过双击定位问题代码,对某些问题可以进行快速的修复 比如: ...
- C#图解教程 第七章 类和继承
类和继承 类继承访问继承的成员所有类都派生自object类屏蔽基类的成员基类访问使用基类的引用 虚方法和覆写方法覆写标记为override的方法覆盖其他成员类型 构造函数的执行 构造函数初始化语句类访 ...
- Python Web-第六周-JSON and the REST Architecture(Using Python to Access Web Data)
1.JavaScript Object Notation JSON 1.JSON 官方介绍 http://www.json.org/json-zh.html 2.json1.py import jso ...
- Java中==与equals的区别及理解
区别: "==" 比较的是两个引用在内存中指向的是不是同一对象(即同一内存空间),也就是说在内存空间中的存储位置是否一致. 如果两个对象的引用相同时(指向同一对象时)," ...
- iOS开发--XMPPFramework--好友列表(五)
上一篇文章,我们讨论了调试和好友模块,这一篇,在引入了好友模块后,我们来说说好友列表的显示. 还记得在上一篇中,我们把自动拉去好友列表给关掉了,所以,我们选择在控制器的-(void)viewDidLo ...
- Postman教程——创建第一个集合
系列文章首发平台为果冻想个人博客.果冻想,是一个原创技术文章分享网站.在这里果冻会分享他的技术心得,技术得失,技术人生.我在果冻想等待你,也希望你能和我分享你的技术得与失,期待. 什么是集合 集合是P ...
- sqoop2报错
sqoop:000> create link --cid 4 Creating link for connector with id 4Exception has occurred during ...
- PHP随机函数-集锦
1 PHP随机函数收藏 function random_string($len = 6) { $chars = array( "a", "b", "c ...