小程序开发实战案例之三 |
您所在的位置：网站首页 › 设置底部导航怎么设置出来 › 小程序开发实战案例之三 |
小程序开发实战案例之三
|
小程序中最常见的功能就是底部导航栏了，今天就来看一下怎么设置一个好看的导航栏～这里我们使用的是支付宝官方小程序 IDE 做示范。
一般的小程序会有四个 tab，我们这次也是配置四个 tab 的导航栏。 首先，我们先创建四个页面：
tab 最多可以设置五个，参考 👉 [tabBar 能设置几个 tab] 第二步：在 app.json 中配置底部导航栏的信息📌 底部导航栏需要在 app.json 文件中通过 tabBar 属性配置，其中： textColor：设置文字颜色selectedColor：设置选中文字颜色backgroundColor：设置背景色items：每个 tab 配置 pagePath：对应 tab 页面路径name：对应显示 tab 名称icon：非选中状态下图标路径activeIcon：选中状态下图图标路径app.json文件代码 { "pages": [ "pages/index/index", "pages/mine/mine", "pages/sort/sort", "pages/basket/basket" ], "window": { "defaultTitle": "购物商城" }, //底部导航栏的信息 "tabBar": { "textColor": "#dddddd", "selectedColor": "#49a9ee", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "name": "首页" }, { "pagePath": "pages/sort/sort", "name": "分类" }, { "pagePath": "pages/basket/basket", "name": "购物车" }, { "pagePath": "pages/mine/mine", "name": "我的" } ] } }实现效果
这里收集了一下导航栏的常见问题，帮大家避坑： [tabBar 的位置是否支持设置成顶部][切换 tabBar 时报错 Cannot read property 'getCurrentPages' of undefined 如何处理][如何监听 tabBar 点击事件] 第三步：美化导航栏简单的 tab 功能实现后，我们可以通过图标（icon/activeIcon）、颜色等属性对导航栏进行下美化。 先配一个图标，图标大家可以自行搜索，记得找透明底色图片（否则会有白底儿 😅）。 一个 tab 需要配置图标的两个状态，即 选中状态 和 非选中状态，例如：
创建 images 文件夹，把图片拖进去：
稍微美化后的 tabBar 代码： "tabBar": { "textColor": "#0e932e", "selectedColor": "#49a9ee", "backgroundColor": "#ffffff", "items": [ { "pagePath": "pages/index/index", "icon": "images/index.png", "activeIcon": "images/index_t.png", "name": "首页" }, { "pagePath": "pages/sort/sort", "icon": "images/sort.png", "activeIcon": "images/sort_t.png", "name": "分类" }, { "pagePath": "pages/basket/basket", "icon": "images/basket.png", "activeIcon": "images/basket_t.png", "name": "购物车" }, { "pagePath": "pages/mine/mine", "icon": "images/mine.png", "activeIcon": "images/mine_t.png", "name": "我的" } ] }实现效果
配置完上面信息之后一个简单的 tab 页面就出来了，基本就可以满足一般小程序的要求了。 tabBar 样式配置的常见问题给大家参考下： [tabBar 的 icon 支持哪些图片格式][tabBar 的图标推荐大小][tabbar 是否支持设置字体大小] 第四步：导航栏进阶功能如果对应的页面需要提示用户进行交互的话，我们就可以用到下面的功能，例如 tab 红点提示、tab 文本提示 。 tab 红点提示通过 my.showTabBarRedDot 方法给【我的】增加红点提醒 //index.js Page({ onLoad(query) { my.showTabBarRedDot({ index: 3,//左边开始，从0计数 success: function(res) { console.log(res); //{ "success": true} }, fail: function(err) { console.log(err); } }) console.info(`Page onLoad with query: ${JSON.stringify(query)}`); }, })实现效果
通过 my.hideTabBarRedDot 方法在点击【我的】时候隐藏红点： //mine.js Page({ onLoad() { my.hideTabBarRedDot({ index: 3,//左边开始，从0计数 success: function(res) { console.log(res); //{ "success": true} }, fail: function(err) { console.log(err); } }); }, });实现效果
通过 my.setTabBarBadge 方法给【购物车】增加数量 加入购物车 //index.js Page({ addShop(){ my.setTabBarBadge({ index: 2,//左边开始，从0计数 text: '8',//全部显示只支持3个字符 success(res) { console.log(res); }, fail(res) { console.log('setTabBarBadge fail: ', res); } }) } });实现效果
超过 3 个字符效果
如果需要移除文本的话，可以通过 my.removeTabBarBadge 方法实现 //basket.js Page({ onLoad() { my.removeTabBarBadge({ index: 2,//左边开始，从0计数 success: function(res) { console.log(res); // { "success": true} }, fail: function(err) { console.log(err); } }); }, });实现效果
tabBar 切换的问题大家可以参考： [小程序 tabBar 页面如何透出消息提示][tabBar 切换时对应页面的 onShow 会不会触发] 自定义底部导航栏如果想要设置更多能力的 tabBar 的话，可以使用自定义Tab来实现。⚠ 注意： 使用自定义 tabBar 后，与 tabBar 样式相关的接口都无法使用，例如设置红点（my.showTabBarRedDot ）、修改样式（my.setTabBarStyle）等。自定义 tabBar 相当于是自定义了一个组件，可以通过 getTabBar 获取自定义 tabBar 实例进行操作。 第一步：创建自定义 tabBar 目录添加自定义的 tabBar 文件，文件位置和名字要保持一致：
配置 app.json 文件，在 tabBar 下添加 customize 属性，设置为 true { "pages": [ "pages/index/index", "pages/mine/mine", "pages/sort/sort", "pages/basket/basket", "pages/member/member" ], "window": { "defaultTitle": "购物商城" }, "tabBar": { "customize": true, "items": [ { "pagePath": "pages/index/index", "name": "首页" }, { "pagePath": "pages/sort/sort", "name": "分类" }, { "pagePath": "pages/member/member", "name": "会员" }, { "pagePath": "pages/basket/basket", "name": "购物车" }, { "pagePath": "pages/mine/mine", "name": "我的" } ] } } 第三步：编写自定义 tabBar 代码customize-tab-bar 文件下 index.axml 页面： |
【本文地址】
今日新闻 |
推荐新闻 |