前言

对于目前形式，微信小程序是一个热门，那么我们该如何去学习并且掌握之后去做实际项目呢？
为此我特意开设此专栏，在我学习的同时也将其分享给大家！

本篇文章将给大家带来如何添加页面切换效果，我们前面所讲解的都是停留在某一页面上面进行预览，接下来我们将进入多页面切换的操作中！

如果在往下阅读的过程中，有什么错误的地方，期待大家的指点！

一、tabBar 介绍

首先看一下下面的图片！

在上图中，有两种选择方式，一种是在顶部切换页面的，一种是在底部切换。接下来我们将学习一下他们分别是如何实现的。

tabBar 最少配置两个，最多不能超过五个标签
在渲染底部时，tabBar 显示文本和图表，渲染顶部只显示文本

那么我们如何利用 tabBar 实现功能呢？接下来我先将各种功能展示出来，然后进行逐一讲解。

属性名称	作用
1. backgroundColor	配置 tabBar 的背景颜色
2. selectediconPath	配置选中时图标的路径
3. borderStyle	tabBar 的上边框颜色
4. iconPath	未选择时图标的路径
5. selectedColor	tabBar 上标签被选中时文本颜色
6. color	tabBar 上标签未选择时文本颜色
7. position	设置 tabBar 的位置（仅支持 bottom 和 top）
8. list	设置 tab 标签列表数
9. pagepath	设置页面路径
10. text	设置 tab 上显示的文字

在 app.json 里面配置 tabBar 的时候，我们可以用到 1 3 5 6 7 8，当我们配置每一个标签 list 的时候需要用到 2 4

二、实操（创建 tabBar ）

经过上述的描述，我相信大家对于 tabBar 有了一个初步的认识，那么接下来我们进行实际操作，将 tabBar 创建流程熟悉起来！

2.1 基本配置

打开 app.json ，新增 tabBar 配置节点
```
"tabBar": {"list": [{},{},{}]
},
```

配置三个 tab项（三个项分别对应现有的三个页面）

"tabBar": {"list": [{"pagePath": "pages/list/list","text": "list"},{"pagePath": "pages/index/index","text": "index"},{"pagePath": "pages/logs/logs","text": "log"}]
},

当前效果图

2.2 详细配置

接下来我将带大家配置具体的 tabBar，一共有三个 tab，分别命名为首页、次页、末页。并且添加图标，分别为三个选中时图标于未选中时图标。

在根目录下创建一个文件夹命名为“照片”，将所需六张照片导入

打开 app.json ，在 tabBar 中设置 iconPath 和 selectedIconPath

"tabBar": {"list": [{"pagePath": "pages/list/list","text": "首页","iconPath": "/pages/照片/2.jpeg","selectedIconPath": "/pages/照片/1 (1).jpeg"},{"pagePath": "pages/index/index","text": "次页","iconPath": "/pages/照片/3.jpeg","selectedIconPath": "/pages/照片/1 (2).jpeg"},{"pagePath": "pages/logs/logs","text": "末页","iconPath": "/pages/照片/4.jpeg","selectedIconPath": "/pages/照片/1 (3).jpeg"}]
},

效果展示

至此 tabBar 的基本应用就到此结束啦，各位看官可以余下时间多多练习！

总结

大家每天都要开开心心的喔，让我们一起快乐的学习吧！

【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）相关推荐

【微信小程序入门到精通】— 小程序的 API 到底是个啥
目录前言一.API 导论二.事件监听 API 三.同步 API 四.异步 API 总结前言对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢? 为此我特意开设 ...
【微信小程序入门到精通】—小程序实战构建售货平台首页
目录前言一.步骤阐述二.新建项目并梳理结构三.配置导航栏四.tabBar 实现五.轮播图实现总结前言对于目前形式,微信小程序是一个热门,那么我们该如何去学习并且掌握之后去做实际项目呢 ...
视频教程-微信小程序界面设计-样式入门到精通-微信开发
微信小程序界面设计-样式入门到精通 04年进入计算机行业.拥有6年net和php项目开发经验,8年java项目开发经验. 现前端全栈工程师,主攻产品设计,微信开发等. 黄菊华 ¥66.00 立即订阅 ...
小程序入门教程之微信-02-页面样式
这个系列的,上一篇教程教大家写了一个最简单的 Hello world 微信小程序. 但是,那只是一个裸页面,并不好看.今天接着往下讲,如何为这个页面添加样式,使它看上去更美观,教大家写出实际可以使用的 ...
小程序入门教程之微信-03-脚本编程
本篇的难度要大于前两篇,如果觉得不好理解,可以先跟着例子,动手做一遍,然后再读文字说明,可能就容易理解了. 所有示例的完整代码,都可以从 GitHub 的代码仓库下载. 一.数据绑定前面的所有示例, ...
微信小程序入门1--新建微信小程序页面
微信小程序入门1–新建微信小程序页面在新建微信小程序后会自动生成一个DEMO实例,我们可以在实例中修改自己所需的内容,当内容过多时,实例中的页面不足以满足我们的需求,因此需要新建微信小程序页面. 本 ...
《微信公众平台入门到精通》，青龙老贼，详情版本
<微信公众平台入门到精通>,青龙老贼,详情版本 <微信公众平台入门到精通>Vol.1 http://segmentfault.com/a/1190000000356021 ...
小程序入门到精通：微信小程序介绍及开发准备工作（一）
1. 什么是小程序? 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用 ( 张小龙对其的定义是无需安装,用完即走 ...
【微信小程序入门到精通】— 微信小程序开发工具的安装
目录前言一.注册小程序账号二.安装开发环境 2.1 微信小程序开发工具介绍 2.1 安装微信开发者工具总结前言微信小程序在我们日常使用中已经占据很大一部分了,此专栏是专门为了微信小程序学习 ...

【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）

目录

前言

一、tabBar 介绍

二、实操（创建 tabBar ）

2.1 基本配置

2.2 详细配置

总结

【微信小程序入门到精通】— 微信小程序实现多页面切换（tabBar）相关推荐

最新文章

热门文章