之前写的那个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. Java循环和条件

    下列程序的输出结果是什么? 1.Java循环和条件 /** * @Title:IuputData.java * @Package:com.you.data * @Description:TODO * ...

  2. HighCharts之2D条状图

    HighCharts之2D条状图 1.HighCharts之2D条状图源码 bar.html: <!DOCTYPE html> <html> <head> < ...

  3. do while 循环和while循环的区别

    do while 循环和while循环的区别 1.do while循环是先执行循环体,然后判断循环条件,如果为真,则执行下一步循环,否则终止循环:    while循环是先判断循环条件,如果条件为真则 ...

  4. org.hibernate.exception.ConstraintViolationException

    1.错误描述 Caused by:org.hibernate.exception.ConstraintViolationException:Could not execute JDBC batch u ...

  5. 芝麻HTTP:Gerapy的安装

    Gerapy是一个Scrapy分布式管理模块,本节就来介绍一下它的安装方式. 1. 相关链接 GitHub:https://github.com/Gerapy 2. pip安装 这里推荐使用pip安装 ...

  6. angular路由参数说明

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web ...

  7. WPF基础篇之控件模板(ControlTemplate)

    WPF中每一个控件都有一个默认的模板,该模板描述了控件的外观以及外观对外界刺激所做出的反应.我们可以自定义一个模板来替换掉控件的默认模板以便打造个性化的控件. 与Style不同,Style只能改变控件 ...

  8. Linux之安全应用

    一.关于iptables 定义:常见于linux系统下的应用层防火墙工具 二.Iptables规则原理和组成 1) Netfilter Netfilter是Linux操作系统核心层内部的一个数据包处理 ...

  9. 网页加载进度的实现--JavaScript基础

    总结了一些网页加载进度的实现方式…… 1.定时器实现加载进度 <!DOCTYPE html><html lang="en"><head> < ...

  10. 【BZOJ2337】Xor和路径(高斯消元)

    [BZOJ2337]Xor和路径(高斯消元) 题面 BZOJ 题解 我应该多学点套路: 对于xor之类的位运算,要想到每一位拆开算贡献 所以,对于每一位拆开来看 好了,既然是按位来算 我们就只需要计算 ...