微信小程序如何自定义tabbar

字数统计: 148字   |   阅读时长≈ 1分

  • 首先在 app.json 中的 tabBar 项指定 custom 字段的值为 true，同时其余 tabBar 相关配置也补充完整。
    并在所有 tab页 的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

  • 在很目录下创建文件夹，名为 custom-tab-bar ，里面添加 tabbar 的文件

1
2
3
4
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

其实就是一个自定义组件，具体可参考 自定义 tabBar · 小程序 中的示例
这时你在 custom-tab-bar/index.wxml 中的内容就会被渲染到 tabbar 中

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true