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

先看效果图:

app.json代码:(有木有感觉很简单的样子哈哈)

  1. "tabBar": {
  2. "color":"#fff",
  3. "selectedColor":"#1296db",
  4. "backgroundColor":"#ccc",
  5. "list": [
  6. {
  7. "pagePath": "pages/index/index",
  8. "text": "首页",
  9. "iconPath":"images/iconHome.png",
  10. "selectedIconPath":"images/seleHome.png"
  11. },
  12. {
  13. "pagePath": "pages/logs/logs",
  14. "text": "地址",
  15. "iconPath": "images/iconMap.png",
  16. "selectedIconPath": "images/seleMap.png"
  17. }
  18. ]
  19. },

☀下面是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. freemarker报错之十

    1.错误描述 <html> <head> <meta http-equiv="content-type" content="text/htm ...

  2. java.lang.NoClassDefFoundError: org/apache/jsp/jsp/Container_jsp

    1.错误描述 八月 20, 2014 7:10:18 下午 org.apache.catalina.core.StandardWrapperValve invoke 严重: Servlet.servi ...

  3. MySQL语法大全整理的自学笔记

    select * from emp; #注释 #--------------------------- #----命令行连接MySql--------- #启动mysql服务器 net start m ...

  4. 版本控制工具--svn和git的使用(三) -----git的使用(2)

    远程仓库github是git所用的远程仓库,免费的也有私用的.github的账号注册,----省略.创建ssh key:$ ssh-keygen -t rsa -c 'github的账号'查看各个系统 ...

  5. 两个map一个reduce(两个输入文件)

    两个map,一个map读取一个hdfs文件,map完之后进入一个reduce进行逻辑处理. package com.zhongxin.mr; import org.apache.commons.lan ...

  6. 【转载】Spark学习——spark中的几个概念的理解及参数配置

    首先是一张Spark的部署图: 节点类型有: 1. master 节点: 常驻master进程,负责管理全部worker节点.2. worker 节点: 常驻worker进程,负责管理executor ...

  7. Dockerfile 中的 multi-stage

    在应用了容器技术的软件开发过程中,控制容器镜像的大小可是一件费时费力的事情.如果我们构建的镜像既是编译软件的环境,又是软件最终的运行环境,这是很难控制镜像大小的.所以常见的配置模式为:分别为软件的编译 ...

  8. (luogu P1383)高级打字机

    高级打字机 题目链接 https://www.luogu.org/problemnew/show/P1383 背景 无聊中.. 随便在luogu上rand到了一道题 从此走上不归路 主席树是我暑假的时 ...

  9. Liunx2:Liunx目录结构

    Liunx目录图 进入根目录,使用ll命令看一下Liunx整个根目录图: 这里面所有的目录都是买完服务器之后最初始的目录,没有进过任何加工.Liunx以树的结构组织所有目录,用一张图表示一下Liunx ...

  10. c# MongoDB Driver 官方教程翻译

    先贴官方文档地址:http://mongodb.github.io/mongo-csharp-driver/2.5/getting_started/quick_tour/ 安装部分很简单,nuget搜 ...