微信小程序开发笔记2,底部导航栏tablebar

时间:2021-09-02 04:49:51

底部导航(要在app.js里面配置,也就是把导航的代码写到app.js)

官方文档说最少2个导航最多5个

,

"tabBar": {

"color": "#a9b7b7",

"selectedColor": "#11cd6e",

"borderStyle": "black",

"list": [

{

"selectedIconPath": "pages/img/2fc63e8e2ffb30c045e7653c3a4bfdb.png",//导航图标

"iconPath": "pages/img/2fc63e8e2ffb30c045e7653c3a4bfdb.png",//导航图标

"pagePath": "pages/index/index",//导航跳转的页面

"text": "首页" //导航文字

},

{

"selectedIconPath": "pages/img/2fc63e8e2ffb30c045e7653c3a4bfdb.png",

"iconPath": "pages/img/2fc63e8e2ffb30c045e7653c3a4bfdb.png",

"pagePath": "pages/logs/logs",

"text": "一元投"

},

{

"selectedIconPath": "pages/img/2fc63e8e2ffb30c045e7653c3a4bfdb.png",

"iconPath": "pages/img/2fc63e8e2ffb30c045e7653c3a4bfdb.png",

"pagePath": "pages/mine/mine",

"text": "我的"

}

]

}

微信小程序开发笔记2,底部导航栏tablebar

微信小程序开发笔记2,底部导航栏tablebar的更多相关文章

  1. 微信小程序把玩(三)tabBar底部导航

    原文:微信小程序把玩(三)tabBar底部导航 tabBar相对而言用的还是比较多的,但是用起来并没有难,在app.json中配置下tabBar即可,注意tabBar至少需要两个最多五个Item选项 ...

  2. 微信小程序开发笔记02

    今天学习了微信小程序开发用到的语言,wxml与wxss语言基本语法与html和css基本语法相似,学习起来相对简单.在小程序主要的语言是js(javascript,跟准确的说是jqery) ,由于这种 ...

  3. 微信小程序开发笔记01

    微信小程序开发的优势 1,不用安装,即开即用,用完就走.省流量,省安装时间,不占用桌面: 2,体验上虽然没法完全媲美原生APP,但综合考虑还是更优: 3,对于小程序拥有者来说,开发成本更低,他们可以更 ...

  4. 微信小程序开发笔记(一)

    一.为什么要学习微信小程序开发 微信小程序是一个可以在微信上打开的轻应用,他是由多个页面组成的程序,跟传统APP比较如下: 优点 1.不需要在应用商店下载,不占用内存空间,即开即用 2.可以在微信内直 ...

  5. 微信小程序四(设置底部导航)

    好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的. 我们先来看个效果图 这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个. 那他们是怎么出现怎么着色的呢?两步 ...

  6. 微信小程序开发笔记

    前言: 因为前段时间一直在做关于微信小程序方面的项目,作为一名后端的攻城狮而言做一些简单的前端页面数据操作和管理还是比较容易快上手的,当然前提是要理解微信小程序的基本语法和请求原理.该篇博客主要记录的 ...

  7. 微信小程序开发笔记04

    今天将小程序的页面进行优化 消除昨天遇到的bug问题. 完成了微信小程序的开发.

  8. 微信小程序开发笔记(二)

    一.前言 继承上一篇所说的,有了对微信小程序的基础概念后,这边将会示范动手做一个小程序,在动手的过程中我们可以更快的熟悉小程序里面的架构和开发流程. 二.小程序的设计 这次要做的是一个猜数字的程序,程 ...

  9. 微信小程序开发笔记03

    今天基本实现了微信小程序主要功能,页面还没有进行优化,有些功能还需完善. 页面之间的信息转化部分还未实现.

随机推荐

  1. #define中 #与##用法

    参考自: http://zjf30366.blog.163.com/blog/static/411164582009061075923/ #include<cstdio> #include ...

  2. poj 1286&amp&semi;&amp&semi;poj2409 Polya计数 颜色匹配

    #include <iostream> #include <math.h> using namespace std; #define LL long long LL gcd(L ...

  3. &lbrack;翻译&rsqb; Autofac 控制范围和生命周期

    原文链接:http://docs.autofac.org/en/latest/lifetime/index.html Lifetime 是指服务的实例在程序中存活多久 – 从最初的实例化到清理(dis ...

  4. cache与负载均衡

    cache 客户端CACHE客户端CACHE,包括浏览器本身的缓存.FLASH存储等,用于存储一些临时的文件或者变化不大或无变化的数据:1.如浏览器自动将用户浏览的网页存储在用户的硬盘上,下次再浏览相 ...

  5. Centos 6&period;4 python 2&period;6 升级到 3&period;5&period;2

    查看python的版本 #python -V Python 1.下载Python-2.5.2 #wget https://www.python.org/ftp/python/3.5.2/Python- ...

  6. HTTP缓存是如何实现

    浏览器是如何知道使用缓存的,其实这都是通过http中,浏览器将最后修改时间发送请求给web服务器,web服务器收到请求后跟服务器上的文档最后修改的时间对比,如果web服务器上最新文档修改时间小于或者等 ...

  7. HDU5090模拟,hash

    /* HDU 5090 算是一道简单模拟题.但当中有非常深的hash思想 这是本人的第一道hash题 更是本人的第一道纸质代码不带编译不带执行提交AC的题 值得纪念 废话讲这么多之后,讲述题中思想 因 ...

  8. Web Service简单入门示例

    Web Service简单入门示例     我们一般实现Web Service的方法有非常多种.当中我主要使用了CXF Apache插件和Axis 2两种. Web Service是应用服务商为了解决 ...

  9. 1121&colon; &lbrack;POI2008&rsqb;激光发射器SZK

    1121: [POI2008]激光发射器SZK Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 574  Solved: 475[Submit][Sta ...

  10. Spark:相关错误总结

    http://blog.csdn.net/pipisorry/article/details/52916307 路径错误 spark FileNotFoundError: [Errno 2] No s ...