之前写的那个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:

  1. 当设置 position 为 top 时,将不会显示 icon
  2. tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

小程序之Tab切换(二)的更多相关文章

  1. 微信小程序写tab切换

    微信小程序之tab切换效果,如图: 最近在学习微信小程序并把之前的公司app搬到小程序上,挑一些实现效果记录一下(主要是官方文档里没说的,毕竟官方文档只是介绍功能) .wxml代码: <view ...

  2. 小程序之 tab切换(选项卡)

    好久没有写东西了   今天写一个简单的东西 小程序tab切换 (选项卡功能) .wxml <view class="swiper-tab"> <view < ...

  3. 小程序之Tab切换

    小程序越来越火了,作为一名,额  有理想的攻城狮,当然要紧跟互联网时代的步伐啦,于是我赶紧抽时间学习了一下小程序的开发,顺便把经验分享给大家. 对于申请账号以及安装开发工具等,大家可以看官网:http ...

  4. 小程序的tab切换事件

    index.wxml代码 <view class="tab-left" > <view " bindtap="tab">tab ...

  5. 微信小程序之tab切换

    .wxml <view class="select_box"> <scroll-view scroll-x="true" style=&quo ...

  6. 微信小程序滚动tab的实现

    微信小程序滚动tab的实现 1.目的:为了解决滚动版本的tab,以及实现虹吸效果. 2.方案:自己动手写了一个Demo,用于测试实现如上的效果.其代码有做参考,在这里先声明.具体的参照如下:重庆大学二 ...

  7. 小程序入口构造工具&二维码测试工具

    小程序入口构造工具&二维码测试工具 本文将介绍我们小程序中隐藏的两个工具页面.原理虽不复杂,收益却实实在在,或许也能给诸君带来启发. 入口构造工具 痛点 PM&运营 投放链接 PM&a ...

  8. 微信小程序《沈航二手书》

    微信小程序<沈航二手书> 0x01. 利益相关者  利益相关者:是指与客户有一定利益关系的个人或组织群体,可能是客户内部的(如雇员),也可能是客户外部的(如供应商或压力群体). 根据相关利 ...

  9. 微信小程序动态生成保存二维码

    起源:最近小程序需要涉及到一些推广方面的功能,所以要写一个动态生成二维码用户进行下载分享,写完之后受益良多,特此来分享一下: 一.微信小程序动态生成保存二维码 wxml: <view class ...

随机推荐

  1. TCP粘包、拆包及解决

    TCP属于传输层的协议,传输层除了有TCP协议外还有UDP协议.那么UDP是否会发生粘包或拆包的现象呢?答案是不会.UDP是基于报文发送的,从UDP的帧结构可以看出,在UDP首部采用了16bit来指示 ...

  2. 异常-----freemarker.core.ParseException: Encountered

    1.错误描述 freemarker.core.ParseException: Encountered " " at line 14, column 12 in myself.ftl ...

  3. C#图解教程 第十六章 转换

    转换 什么是转换隐式转换显式转换和强制转换 强制转换 转换的类型数字的转换 隐式数字转换溢出检测上下文 1.checked和unchecked运算符2.checked语句和unchecked语句 显式 ...

  4. Bootstrap下拉菜单的使用(附源码文件)--Bootstrap

    1.Bootstrap下拉菜单的使用,源代码如下:(如有不当之处,还望大佬们指出哈……) <!DOCTYPE html> <html lang="en"> ...

  5. 【视频编解码·学习笔记】11. 提取SPS信息程序

    一.准备工作: 回到之前SimpleH264Analyzer程序,找到SPS信息,并对其做解析 调整项目目录结构: 修改Global.h文件中代码,添加新数据类型UINT16,之前编写的工程中,UIN ...

  6. 【BZOJ3531】旅行(树链剖分,线段树)

    [BZOJ3531]旅行(树链剖分,线段树) 题面 Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教 ...

  7. 【Luogu1919】 A*B Problem升级版(FFT)

    题面戳我 题解 把每个数都直接看做一个多项式,每一位就是一项 现在求用FFT求出卷积 然后考虑一下进位就可以啦 #include<iostream> #include<cstdio& ...

  8. [BZOJ1007] [HNOI2008] 水平可见直线 (凸包)

    Description 在xoy直角坐标平面上有n条直线L1,L2,...Ln,若在y值为正无穷大处往下看,能见到Li的某个子线段,则称Li为可见的,否则Li为被覆盖的. 例如,对于直线:L1:y=x ...

  9. [BZOJ3223] [Tyvj1729] 文艺平衡树 (splay)

    Description 您需要写一种数据结构(可参考题目标题),来维护一个有序数列,其中需要提供以下操作:翻转一个区间,例如原有序序列是5 4 3 2 1,翻转区间是[2,4]的话,结果是5 2 3  ...

  10. java输出日志

    protected final Logger logger = Logger.getLogger(User.class); logger.info("在控制台中打印的内容");