| uniapp配置基本的tabbar和动态修改内容 | 您所在的位置：网站首页 › 圆形的动态图片怎么弄的 › uniapp配置基本的tabbar和动态修改内容 |
uniapp配置基本的tabbar和动态修改内容
|
开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情 前言在我们使用uniapp开发项目的时候，如果是一个多tab的应用那么就可以使用到tabBar配置项来指定底部导航栏，以及 tab 切换时显示的对应页，uniapp在pages.json中为我们提供了tabBar配置，方便我们快速开发 tabbar的设置也是有一些规定的： 设置tabbar的位置为top时，图标是不会显示的 tabbar的是一个数组，最少配置2个，最多配置5个 tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad 顶部的 tabbar 目前仅微信小程序上支持配置tabbar我们需要创建几个页面和准备几张tabbar的图片(点击和未点击的) 然后在pages.json里配置tabbar，直接输入tabbar就会有代码提示了 在官方的说明文档中规定了一些必填项，如list，color，selectedColor，backgroundColor和一些选填项，在list里也规定了一些必填的选项，pagePath页面路径和text按钮文字，我们按照自己的需要设置就行了 "tabBar": { "color": "#333333", "selectedColor": "#ff0000", "backgroundColor": "#ffffff", "list": [ { "pagePath": "pages/index/index",//页面路径 "text": "首页", //按钮文字 "iconPath": "static/tabbar/index.png", //图片路径 "selectedIconPath": "static/tabbar/index1.png" //选中的图片路径 }, { "pagePath": "pages/order/order", "text": "订单", "iconPath": "static/tabbar/order.png", "selectedIconPath": "static/tabbar/order1.png" }, { "pagePath": "pages/shop/shop", "text": "商城", "iconPath": "static/tabbar/shop.png", "selectedIconPath": "static/tabbar/shop1.png" }, { "pagePath": "pages/my/my", "text": "我的", "iconPath": "static/tabbar/my.png", "selectedIconPath": "static/tabbar/my1.png" } ] },可以看到tabbar成功创建出来了 当我们需要动态修改tabbar的内容，如点击了商城tabbar的内容分别变成了客服，购物车，商城，商品订单该怎么办呢？官方文档给了我们解决办法，使用uni.setTabBarItem动态设置 tabBar 某一项的内容 如何使用uni.setTabBarItem完成上面所说的修改呢？新建将要修改成的页面，这里图片我就不引入了，使用原来的图片 然后新建一个数组，存放要tabbar要修改的数据，当每次进入商城页面的时候就触发onShow页面函数按照数组的每一项循环修改tabbar 然后就看到tabbar的内容被成功修改了 然后可以在商城页面设置一个按钮，将原来设置tabbar的数据复制过来，点击按钮还原原来的tabba goBack(){ for(let i = 0;i |
【本文地址】
公司简介
联系我们