微信小程序-配置-tabBar配置问题

冉娃娃 2017-01-31 04:35:56

微信版本：6.5.4
微信开发者工具版本：0.12.130400
时间：2017-1-31

问题描述：
1、tabBar设置图标无效，wabBar配置代码如下：



 "tabBar": {

    "position": "bottom",

    "list": [

      {

        "pagePath": "pages/index/index",

        "text": "点菜",

        "iconPath": "https://www.ranwawa.cn/content/test/dc1.png",

        "selectedIconPath": "https://www.ranwawa.cn/content/test/dc2.png"

      },.....]

  }

已处理：图标只能使用微信小程序的相对路径，不能使用网络图片，也不用用/这个符号定位根目录，要不然无法手机预览

...全文

148 回复打赏收藏转发到动态举报

写回复

用AI写文章

切换为时间正序

请发表友善的回复…

发表回复

内容概要： 1、小程序底部的tabBar需要根据不同用户角色显示不同底部导航。 2、使用自定义底部导航custom-tab-bar优雅实现微信小程序动态tabBar。 3、实现自由组合tabBar菜单项目，支持自由组合总数超过5个tabBar菜单。 4、本示例是7个底部导航，分2种权限，权限1显示1，2，3；权限2显示4，5，6，7； 5、你也可以根据自己随便组合显示导航，比如1，3，5；2，4，6，7。 6、修改好权限后，记得要重新编译哦。 7、注意你的不同权限页面里面对应的高亮下标设置，及第一个页面的跳转路径。适合人群： 1、具备一定编程基础，熟悉小程序开发者。能学到什么： 1、使用自定义组件，完全接管 tabBar 的渲染。

微信小程序 云开发版 tabbar demo示例。使用了云开发模式集成了iview-webapp UI框架

资源下载链接为： https://pan.quark.cn/s/22ca96b7bd39 微信小程序的自定义 tabBar 提供了丰富的个性化设计能力，而 uni-app 作为跨平台开发框架，也支持适配微信小程序的自定义 tabBar。虽然 uni-app 官方文档未直接说明如何适配，但通过合理配置和代码调整，可以实现这一功能。在 uni-app 中实现自定义 tabBar，不能直接在配置文件中使用 list 方法。主要有两种替代方案：在每个页面加载一个 tabBar 组件，与页面同步渲染。但这种方法会导致代码重复、性能降低以及界面跳动等问题。使用微信官方推荐的自定义 tabBar 方式，通过修改样式来实现。这种方式在性能上更具优势，因此推荐优先采用。在项目根目录创建 custom-tab-bar 文件夹，其结构需符合自定义组件要求。修改小程序配置文件，将 tabBar 设置为 custom 模式。重点关注以下配置： custom-tab-bar 目录页面生命周期中的设置索引方法在 uni-app 中适配自定义 tabBar 时，需要注意以下几点： uni-app 的 page.json 会被编译为微信小程序的 app.json，因此直接修改 page.json 即可。 uni-app 使用类 Vue 开发，一个 Vue 文件会被编译为四个微信页面文件（wxml、wxss、json 和 js）。虽然可以直接创建 custom-tab-bar.vue 文件，但更推荐在 uni-app 中创建 custom-tab-bar 目录，并编写微信小程序所需的四件套文件。uni-app 会将此目录完整复制到微信小程序项目的根目录。在开发过程中，主要面临以下问题： 微信小程序的 this 引用与 uni-app 的 this 引用不同，直接复制代码会导致编译错误。 un

微信小程序 自定义tabbar微信应用标签微信小程序 自定义tabbar项目地址，欢迎 starhttps://github.com/songzeng2016/wechat-app-tabbar前言项目中我们可能会用到两层 tabbar 而小程序只能配置出一层，或者我们想自定义 tabbar 的样式或功能，这时候就需要我们自己定义 tabbar。先来张图看下效果，下面是实现步骤。创建wxml模板