微信小程序设置底部导航栏目方法

微信小程序底部想要有一个漂亮的导航栏目,不知道怎么制作,于是百度找到了本篇文章,分享给大家。

好了 小程序的头部标题 设置好了,我们来说说底部导航栏是如何实现的。

我们先来看个效果图

这里,我们添加了三个导航图标,因为我们有三个页面,微信小程序最多能加5个。

那他们是怎么出现怎么着色的呢?两步就搞定!

 

1. 图标准备

阿里图标库  http://www.iconfont.cn/collections/show/29

我们进入该网站,鼠标滑到一个喜欢的图标上面  点击下方的 下载按钮

在弹出框中 选择了 俩个不同颜色的 图标  选择64px大小即可,我选择的是png  然后下载下来 起上别名 

将上述起好名字的图标 保存到 小程序 项目目录中 新创建的 images 文件夹中,准备工作就做好了

 

2. 更改配置文件

我们找到项目根目录中的配置文件 app.json 加入如下配置信息

 

[html] view plain copy
  1. "tabBar": {  
  2.    "color": "#a9b7b7",  
  3.    "selectedColor": "#11cd6e",  
  4.    "borderStyle":"white",  
  5.    "list": [{  
  6.      "selectedIconPath": "images/111.png",  
  7.      "iconPath": "images/11.png",  
  8.      "pagePath": "pages/index/index",  
  9.      "text": "首页"  
  10.    }, {  
  11.      "selectedIconPath": "images/221.png",  
  12.      "iconPath": "images/22.png",  
  13.      "pagePath": "pages/logs/logs",  
  14.      "text": "日志"  
  15.    }, {  
  16.      "selectedIconPath": "images/331.png",  
  17.      "iconPath": "images/33.png",  
  18.      "pagePath": "pages/test/test",  
  19.      "text": "开心测试"  
  20.    }]  
  21.  },  


解释一下 对应的属性信息

tabBar  指底部的 导航配置属性

color  未选择时 底部导航文字的颜色

selectedColor  选择时 底部导航文字的颜色

borderStyle  底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)

list   导航配置数组

selectedIconPath 选中时 图标路径

iconPath 未选择时 图标路径

pagePath 页面访问地址

text  导航图标下方文字

转载于:https://www.cnblogs.com/iqiao/p/7778113.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/252997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HTTP协议(3)浏览器的使用之查看源码

在做CTF的Web类题目时,推荐使用Firefox浏览器。下面介绍一些在解题过程中关于浏览器的常用技巧。首先就是查看源码。在做Web题目时,经常需要查看网站源码,有的flag直接就藏在源码中,有些题目则是在源码中给出提示和线索&#xff0…

Autofac IoC容器基本使用步骤【1】

原文:http://www.bkjia.com/Asp_Netjc/888119.html 【原文中有一个地方报错,下面已修改】 一.基本步骤: 1.设计适合控制反转(IoC)的应用程序 2.给应用程序Autofac 引用. 3.注册组件. 4.创建一个Container以备后用. 5.从Container创建一个 lifetime scop…

I2C总线之(三)---以C语言理解IIC

为了加深对I2C总线的理解&#xff0c;用C语言模拟IIC总线&#xff0c;边看源代码边读波形&#xff1a; 如下图所示的写操作的时序图&#xff1a; 读时序的理解同理。对于时序不理解的朋友请参考“I2C总线之(二)---时序” 完整的程序如下&#xff1a; #include<reg51.h>…

结对编程总结

这个项目我和我的结对伙伴共花了两个月时间&#xff0c;之所以选这个项目&#xff0c;因为我们之前都学习过Python&#xff0c;也做过类似的程序&#xff0c;相比较其他项目而言&#xff0c;这个项目更合适&#xff0c;也让我们对词频统计方面的知识加深了了解。写这个程序我们…

JavaScript初学者必看“new”

2019独角兽企业重金招聘Python工程师标准>>> 译者按: 本文简单的介绍了new, 更多的是介绍原型(prototype)&#xff0c;值得一读。 原文: JavaScript For Beginners: the ‘new’ operator 译者: Fundebug 为了保证可读性&#xff0c;本文采用意译而非直译。 <di…

libGDX-wiki发布

为方便大家学习和访问&#xff0c;我将libgdx的wiki爬取到doku-wiki下&#xff0c;专门建立了以下地址。欢迎大家来共同完善。 http://wiki.v5ent.com 转载于:https://www.cnblogs.com/mignet/p/ligbdx_wiki.html

I2C读写时序

1. I2C写时序图&#xff1a; 注意&#xff1a;最后一个byte后&#xff0c;结束标志在第十个CLK上升沿之后&#xff1a; 2. I2C读时序图&#xff1a; 注意&#xff1a;restart信号格式&#xff1b;读操作结束前最后一组clk的最后一个上升沿&#xff0c;主机应发送NACK&#xff0…

软件测试工具LoadRunner中如何定义SLA?--转载

软件测试工具LoadRunner中如何定义SLA&#xff1f; 浏览&#xff1a;2242|更新&#xff1a;2017-04-09 22:50SLA 是您为负载测试场景定义的具体目标。Analysis 将这些目标与软件测试工具LoadRunner在运行过程中收集和存储的性能相关数据进行比较&#xff0c;然后确定目标的 SLA…

骁龙820和KryoCPU:异构计算与定制计算的作用 【转】

本文转载自&#xff1a;https://www.douban.com/group/topic/89037625/ Qualcomm骁龙820处理器专为提供创新用户体验的顶级移动终端而设计。为实现消费者所期望的创新&#xff0c;移动处理器必须满足日益增长的计算需求且降低功耗&#xff0c;同时还要拥有比以往更低的温度&…

亚马逊Rekognition发布针对人脸检测、分析和识别功能的多项更新

今天亚马逊Rekognition针对人脸检测、分析和识别功能推出了一系列更新。这些更新将为用户带来多项能力的改今&#xff0c;包括从图像中检测出更多人脸、执行更高精度的人脸匹配以及获得图像中的人脸得到更准确的年龄、性别和情感属性。Amazon Rekognition的客户可以从今天开始使…

华为敏捷 DevOps 实践:产品经理如何开好敏捷回顾会议

开篇小故事&#xff1a;前几年&#xff0c;一本叫《沉思录》的书在国内突然曝光度很多&#xff0c;因为前某国家领导人“摆案头&#xff0c;读百遍”。《沉思录》是古罗马皇帝马可奥勒写给自己的书&#xff0c;内容大部分是在鞍马劳顿中写的。其实有一句“我们所听到的不过只是…

Android虚拟化引擎VirtualApp探究

2019独角兽企业重金招聘Python工程师标准>>> 介绍 首先需要说明的是&#xff0c;VirtualApp并不是前些阵子滴滴开源的插件化框架VirtualApk。 VirtualApp是一个更加黑科技的东西&#xff0c;他可以创建一个虚拟空间&#xff0c;你可以在虚拟空间内任意的安装、启动和…

揭开全景相机的创业真相

&#xff08;Bubl全景相机&#xff09; 国外一开源&#xff0c;国内就自主。这在VR&#xff08;虚拟现实&#xff09;领域体现的淋漓尽致——Google的Cardborad一开源&#xff0c;国内就有数百家厂商蜂拥做了各种插手机的VR盒子。到了全景相机&#xff0c;这一幕似乎又开始重演…

一个厉害的网站

2019独角兽企业重金招聘Python工程师标准>>> dromara 发现一个网站&#xff0c;发现上面的开源项目真的都非常厉害诶。 转载于:https://my.oschina.net/miaojiangmin/blog/2934221

windwon安装macaca环境

一 安装配置java1.安装java_jdk &#xff0c;安装过程中顺带一起安装jre(1)选择【新建系统变量】--弹出“新建系统变量”对话框&#xff0c;在“变量名”文本框输入“JAVA_HOME”,在“变量值”文本框输入JDK的安装路径&#xff0c; 如“C&#xff1a;/Java/jdk1.6.0_25”(2)在“…

三星要用Exynos 9芯片打造独立VR头显

【天极网VR虚拟现实频道】近期有数据显示&#xff0c;2016年全球VR虚拟现实设备的出货量达到了630万台&#xff0c;其中三星Gear VR以451万台出货量称霸全球VR市场&#xff0c;占据高达71%的市场份额。不过三星的眼光并不局限于手机VR设备&#xff0c;这家公司正在计划推出一款…

Leetcode之二叉树(前200道)

持续更新... github链接&#xff1a;https://github.com/x2mercy/Leetcode_Solution 为什么括号200道呢&#xff01;因为准备按照200道这样的周期刷&#xff0c;每200道刷两遍&#xff0c;第一遍按难度刷&#xff0c;第二遍按类别刷&#xff01; 先整理binarytree这一类别也是因…

在ARM Linux下使用GPIO模拟SPI时序详解

Author&#xff1a;杨正 Data&#xff1a;2016.1.1 Mail&#xff1a;yz2012wwgmail.com一、 概述 SPI是英文SerialPeripheral Interface的缩写&#xff0c;顾名思义就是串行外围设备接口。SPI是一种高速、全双工、同步通信总线&#xff0c;标准的SPI有4个引脚&#xff…

git clone时出现 error:inflate:data stream error(incorrect data check)

git clone时出现 error:inflate:data stream error(incorrect data check) fatal:serrious inflate inconsistency fatal:index-pack failed 经了解&#xff0c;此问题是遗留问题&#xff0c;之前是因为公司对gitlab服务器进行数据迁移而引起这种git clone失败的原因&#xff0…

CentOS 7.5 使用 yum 安装 Kubernetes 集群(二)

一、安装方式介绍 1、yum 安装 目前CentOS官方已经把Kubernetes源放入到自己的默认 extras 仓库里面&#xff0c;使用 yum 安装&#xff0c;好处是简单&#xff0c;坏处也很明显&#xff0c;需要官方更新 yum 源才能获得最新版本的软件&#xff0c;而所有软件的依赖又不能自己指…